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

CSS控制文本框的只读属性的方法

●解决方案一：

有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使

的内容，"中国"两个字不可以修改。

实现的方式归纳一下，有如下几种：

方法1：

onfocus=this.blur() //当鼠标放不上就离开焦点

方法2：readonly

方法3：disabled

完整的例子：

disabled="true" //此果文字会变成灰色，不可编辑

readOnly="true" //文字不会变色，也是不可编辑的

css屏蔽输入：

有两种方法第一：disabled="disabled"这样定义之后被禁用的input 元素既不可用，也不可点击。第二：readonly="readonly" 只读字段是不能修改的。

不过，用户仍然可以使用tab 键切换到该字段，还可以选中或拷贝其文本。

●解决方案二：

CSS封装整个只读文本框的属性：

.TextBoxReadOnly

{

border:1px solid #C0C0C0;

text-align:left;

background-color:#D3D3D3;

width:100px;

readonly:expression(this.readOnly=true);

}

它工作得很好，经过测试，发现了一个问题：用JS代码txt.readOnly=false，不能使文本框回到

可读写状态，用以下也不行!

txt.className="OtherStyle";

txt.readOnly=false;

总之，一旦使用css修饰了该控件使它只读，就不能再使它恢复到可读写的状态了，即使换成其它的css样式，有知道的朋友，请告知下哦。.

于是乎，又写了一个样式：

.TextBoxReadWrite

{

border:1px solid #C0C0C0;

text-align:left;

background-color:#FFFFFF;

width:100px;

readonly:expression(this.readOnly=false);

}

这样再用JS切换样式，就可以在只读与可读写之间来回切换了，把这个过程封装到一个函数中，在程序中就可以自由调用了，虽然有点绕，不过是目前我找到的最好的办法。切换的JS：function f1(ctr,isReadOnly)

{

varoctr=document.getElementById(ctr);

if(octr!=null)

{

if(isReadOnly)

octr.className="TextBoxReadOnly";

else

octr.className="TextBoxReadWrite";

}

}

调用:

function f3()

{

f1("<%=txt1.ClientID %>",true);

}

HTML页面控制方式：