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

CSS控制文本框的只读属性的方法
●解决方案一：
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使
<input type="text" name="input1" value="中国">
的内容，"中国"两个字不可以修改。

实现的方式归纳一下，有如下几种：
方法1：
onfocus=this.blur() //当鼠标放不上就离开焦点
<input type="text" name="input1" value="中国" onfocus=this.blur()>
方法2：readonly
<input type="text" name="input1" value="中国" readonly>
<input type="text" name="input1" value="中国" readonly="true">
方法3：disabled
<input type="text" name="input1" value="中国" disabled="true">
完整的例子：
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456" disabled="true"readOnly="true" /> disabled="true" //此果文字会变成灰色，不可编辑
readOnly="true" //文字不会变色，也是不可编辑的
css屏蔽输入：<input style="ime-mode: disabled">
有两种方法第一：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页面控制方式：
<input name="" type="text" readonly="readonly" />。