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

发布时间:2020-12-14编辑:脚本学堂
使用css来控制文本框的只读属性,有需要的朋友,不妨参考下了。

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)
    {
        var octr=document.getElementById(ctr);
        if(octr!=null)
        {
            if(isReadOnly)
                octr.className="TextBoxReadOnly";
            else
                octr.className="TextBoxReadWrite";
        }
    }

调用:

function f3()
    {
    f1("<%=txt1.ClientID %>",true);
}