CSS控制文本框的只读属性的几种方法.doc

《CSS控制文本框的只读属性的几种方法.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS控制文本框的只读属性的方法l解决方案一：有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种：方法1：onfocus=this.blur()//当鼠标放不上就离开焦点方法2：readonly

2、text"name="input1"value="中国"readonly>方法3：disabled完整的例子：

3、eOut="this.className='input_2'"value=""disabled="true"　readOnly="true"/>disabled="true"//此果文字会变成灰色，不可编辑readOnly="true"//文字不会变色，也是不可编辑的css屏蔽输入：有两种方法第一：disabled="disabled"这样定义之后被禁用的input元素既不可用，也不可点击。第二：readonly="readonly"只

4、读字段是不能修改的。不过，用户仍然可以使用tab键切换到该字段，还可以选中或拷贝其文本。l解决方案二：CSS封装整个只读文本框的属性：.TextBoxReadOnly{border:1pxsolid#C0C0C0;text-align:left;background-color:#D3D3D3;width:100px;readonly:expression(this.readOnly=true);}它工作得很好，经过测试，发现了一个问题：用JS代码txt.readOnly=false，不能使文本框回

5、到可读写状态，用以下也不行!txt.className="OtherStyle";txt.readOnly=false;总之，一旦使用css修饰了该控件使它只读，就不能再使它恢复到可读写的状态了，即使换成其它的css样式，有知道的朋友，请告知下哦。.于是乎，又写了一个样式：.TextBoxReadWrite{border:1pxsolid#C0C0C0;text-align:left;background-color:#FFFFFF;width:100px;readonly:expression(t

6、his.readOnly=false);}这样再用JS切换样式，就可以在只读与可读写之间来回切换了，把这个过程封装到一个函数中，在程序中就可以自由调用了，虽然有点绕，不过是目前我找到的最好的办法。切换的JS：functionf1(ctr,isReadOnly){varoctr=document.getElementById(ctr);if(octr!=null){if(isReadOnly)octr.className="TextBoxReadOnly";elseoctr.className="Te

7、xtBoxReadWrite";}}调用:functionf3(){f1("<%=txt1.ClientID%>",true);}HTML页面控制方式：