程序员人生 网站导航

HTML中让表单input等文本框为只读不可编辑的方法

栏目:数据库应用时间:2015-05-21 08:29:55

最近项目的需要的修改手机号码发送验证码时输入框里面的内容不可以修改,上网查了1下资料显示以下:

1.

有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value="中国"> 的内容,"中国"两个字不可以修改。实现的方式归纳1下,有以下几种。 

方法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>

<input type="text" name="input1" value="中国" disabled="disabled">

 

可以采取第3种

2,首先说明1下这些方法是1开始就设置好的,我要的是先可以输入,后来不可以输入,所以不可以1开始就在表单里面去设置。

3,所以我们只能在Javascript或jQuery里面去写:

jquery 怎样将不可编辑的文本框变成可编辑状态:

改成
$("input").removeAttr("disabled");//disabled是属性,不是元素,用removeAttr()可以移除属性
固然你也能够这样用
$("input").attr("disabled",false);
如果要是添加属性的话就能够这样
$("input").attr("disabled",true);
【注意】:disable是失效的意思,就是表单甚么的可以修改上传,故也不可以,附相干词的用法:

今天想总结几个很有用的html标签,开发中常常用到,不熟习的人可能还真不太清楚,分别是:

readonly、disabled、autocomplete

readonly表示此域的值不可修改,仅可与 type="text" 配合使用,可复制,可选择,可以接收焦点,后台会接收到传值.

<input type="text" name="www.phpddt.com" readonly="readonly"  />

disabled表示禁用input元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值

<input type="text"  name="www.phpddt.com" disabled="disabled" />

另外可以通过css屏蔽输入法:<input style="ime-mode: disabled">

最后介绍1个经常使用的标签,阅读器通常会记录input输入框的记录,所以你在输入的时候,常常会下拉很多内容,以下图:

如何禁止input文本框输入

如果你想去掉的话,最好加上autocomplete="off",使用方法以下:autocomplete="off"

<input type="text"  autocomplete="off"   id="number"/>  

4,所以这样写就能够了:
<input type="text" class="text" maxlength="40" name="tel" id="tel"/>
$("#tel").attr("readonly",true);就能够了。




------分隔线----------------------------
------分隔线----------------------------

最新技术推荐