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

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

1.

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

方法1: οnfοcus=this.blur() 
<input type="text" name="input1" value="中国" οnfοcus=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">

 

可以采用第三种

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

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">

最后介绍一个常用的标签，浏览器通常会记录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);就可以了。