用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);} 

 

在页面上可以这样来引用：

 

window.onload = function(){//开启表单只读模式setFormEditState("myform",0,"readOnly");//开启表单元素不可用模式//setFormEditState("myform",0,"disabled");} 

 

像这样的做法已经能够达到效果了，可是这段代码不优雅，我想用Form对象的prototype来添加Form对象的属性和方法，更优雅地

通过对象属性设置来启用这段代码，却发现:

alert(document.getElementById("formid"))提示为undefined，

alert(document.getElementById("formid") instanceof HTMLFormElement);提示为true,

alert(document.forms["myform"].prototype); 提示undefined

 

可能对于Prototype和JS表单的一些对象了解不清楚，希望有人能够提供一些帮助，在些非常感谢！