的内容,"中国"两个字不可以修改。实现的方"> 的内容,"中国"两个字不可以修改。实现的方" />
欢迎来到天天文库
浏览记录
ID:57687155
大小:18.50 KB
页数:2页
时间:2020-09-01
《CSS控制文本框的只读属性的几种方法.doc》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、CSS控制文本框的只读属性的方法l解决方案一:有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种:方法1:onfocus=this.blur()//当鼠标放不上就离开焦点方法2:readonly2、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(t6、his.readOnly=false);}这样再用JS切换样式,就可以在只读与可读写之间来回切换了,把这个过程封装到一个函数中,在程序中就可以自由调用了,虽然有点绕,不过是目前我找到的最好的办法。切换的JS:functionf1(ctr,isReadOnly){varoctr=document.getElementById(ctr);if(octr!=null){if(isReadOnly)octr.className="TextBoxReadOnly";elseoctr.className="Te7、xtBoxReadWrite";}}调用:functionf3(){f1("<%=txt1.ClientID%>",true);}HTML页面控制方式:
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(t6、his.readOnly=false);}这样再用JS切换样式,就可以在只读与可读写之间来回切换了,把这个过程封装到一个函数中,在程序中就可以自由调用了,虽然有点绕,不过是目前我找到的最好的办法。切换的JS:functionf1(ctr,isReadOnly){varoctr=document.getElementById(ctr);if(octr!=null){if(isReadOnly)octr.className="TextBoxReadOnly";elseoctr.className="Te7、xtBoxReadWrite";}}调用:functionf3(){f1("<%=txt1.ClientID%>",true);}HTML页面控制方式:
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页面控制方式:
此文档下载收益归作者所有