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

浏览数：21 / 时间：2015年06月09日

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

1.

有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<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>

<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);就可以了。

















          

            

              
              郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
            

          


          


          

            标签： 
            class
            
            style
            
            com
            
            使用
            
            src
            
            http
            
            java
            
            si
            
            html
            
            class
            
            style
            
            com
            
            使用
            
            src
            
            http
            
            java
            
            si
            
            html
            
            
            
          


          

            

              
相关文章

              
    
                
              

            

            

              
随机文章

              
            

          



          

            

              
您可能还喜欢

              
    
                
              

            


            

              
您可能还喜欢