您现在的位置: 365建站网 > 365学习 > juqery/js/css设置文本框只读属性的方法

juqery/js/css设置文本框只读属性的方法

文章来源:365jz.com     点击数:213    更新时间:2018-10-28 10:03   参与评论

一、设置HTML表单文本框为只读的几种方式

有时候,我们希望表单中的文本框是只读的,让用户只能查看信息而不能修改其中的信息,使 input type=”text” name=”input” value=”HTML” 的内容中value得值,就是”HTML”不可以修改。实现的方式有如下几种。 

方法一:修改 onfocus 参数为 this.blur()

<input type="text" name="input" value="HTML" onfocus=this.blur()>

方法二:添加 readonly 参数

<input type="text" name="input" value="HTML" readonly>
<input type="text" name="input" value="HTML" readonly="true">

方法三:添加 disabled 参数

<input type="text" name="input" value="HTML" disabled>


二、jQuery将text文本框设置为只读

$("#c_price").attr("readonly",true);


三、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);
}



如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (213人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------