使用JS控制表单编辑状态-优快云博客

本文链接：https://blog.youkuaiyun.com/ppjava2009/article/details/6070569

本文介绍了一种方法，通过JS实现表单在增加、修改、查看模式间的切换。提供了一个函数`setFormEditState`，根据参数改变表单元素的`disabled`或`readOnly`属性，兼容多种浏览器。此外，作者尝试使用`prototype`增强表单对象的方法，但在实践过程中遇到了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用JS改变表单的编辑状态

引言：有时在做业务时，一个业务的增加、修改和查看页面都是一样的，即可以共用一个页面，那么问题就出现了，在增加和修改时我们需要

页面的表单是可编辑的，而在查看页面却不需表单的可编辑，但可以提供一个编辑的按钮快速切换到可编辑的状态，所以就有了下面的代码...

JS代码如下：

; /* * 激活或关闭表单的用户操作功能 * 关闭有两种模式：disabled（不能用，显示为灰色）和readOnly（只读，不改变样式） * 其中文本框、文本域支持readOnly，其余表单元素不支持readOnly。 * @description * 本函数在以下游览器版本中测试通过：IE6、Chrome9、Firefox3.6 * @param formid 应用表单id * @param state 激活或关闭状态 true表激活编辑状态，false表关闭编辑状态 * @param model 关闭模式 "disabled"表示不可用 , "readOnly"表只读（只有部分元素支持） * @author eric * @date 2010/12/12 * @version 1.0 */ function setFormEditState(formid,state,model){ /* * domForm : 表单对象 * domSels : 表单下所有的下拉框 * domInputs : 表单下所有的Input元素 */ var domForm = document.getElementById(formid) ; var domSels = domForm.getElementsByTagName("select"); var domInputs = domForm.getElementsByTagName("input"); //下拉框属性改变 if(domSels && domSels.length>0){ for(var i=0;i<domSels.length;i++) { changeAttr(domSels[i],"disabled","disabled",state) ; } } //Input元素值改变 if(domInputs && domInputs.length>0){ var attrType = "" ; for(var i=0;i<domInputs.length;i++){ attrType = domInputs[i].getAttribute("type"); if(new RegExp(attrType,"i").test("radio,checkbox,file")){ changeAttr(domInputs[i],"disabled","disabled",state) ; }else if(new RegExp(attrType,"i").test("text,textarea,password")){ changeAttr(domInputs[i],model,model,state) ; } } } } /* * 为DOM元素添加或移除属性 * @param domEl dom元素 * @param attrName 属性名称 * @param attrValue 属性值 * @param onoff 添加或删除操作 true表示添加 false表示移除 * @author eric * @date 2010/12/12 * @version 1.0 */ function changeAttr(domEl,attrName,attrValue,onoff){ if(!domEl)return ; if(!onoff)domEl.setAttribute(attrName,attrValue); else domEl.removeAttribute(attrName); }