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 >
有两种方法第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。
第二：readonly="readonly" 只读字段是不能修改的。
不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
● 解决方案二：
CSS封装整个只读文本框的属性：
.TextBoxReadOnly
{
border:1px solid #C0C0C0;
text-align:left;
background-color:#D3D3D3;
width:100px;
cssclass属性readonly:adOnly=true);
}
它工作得很好，经过测试，发现了一个问题：用JS 代码adOnly=false，不能使文本框回到可读写状态，用以下也不行!
txt.className="OtherStyle";
adOnly=false;
总之，一旦使用css修饰了该控件使它只读，就不能再使它恢复到可读写的状态了，即使换成其它的css 样式，有知道的朋友，请告知下哦。.
于是乎，又写了一个样式：
.TextBoxReadWrite
{
border:1px solid #C0C0C0;
text-align:left;
background-color:#FFFFFF;
width:100px;
readonly:adOnly=false);
}
这样再用JS切换样式，就可以在只读与可读写之间来回切换了，把这个过程封装到一个函数中，在程序中就可以自由调用了，虽然有点绕，不过是目前我到的最好的办法。切换的JS：
function f1(ctr,isReadOnly)
{
var ElementById(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" />

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。