html5 input禁止输入的实现方法:1、通过readonly规定输入字段为只读可复制;2、通过disabled实现被禁用的input元素可复制,但不能接收焦点;3、通过控制input的max length为0实现;4、通过“οnfοcus=”this.blur();””实现不能输入文本即可。

本教程操作环境:Windows10系统、HTML5版、DELL G3电脑

html5 input 禁止输入怎么实现?

html中input禁止输入(禁止获得焦点)多种方法及input限制数字和长度

input禁止输入(禁止获得焦点)

1: readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。

1

<input type="text" value="禁止输入,可以使用Tab键切换到该字段" readonly="readonly">

2:disabled 被禁用的 input 元素可复制,不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type=”hidden”> 一起使用。

1

<input type="text" value="可复制,不能接收焦点,字的颜色会变成灰" disabled="disabled">

3:通过控制input的max length为0实现

1

<input type="text"  maxlength="0">

4:οnfοcus=”this.blur();”onfocuse是聚焦的意思,当你把光标放在文本框上输入的时候,就是聚焦,但这里添加了”this.blur()”,blur的作用就是去除聚焦,也就是你不能把光标放在这个文本框上,换句话说就是你不能输入文本了

1

<input type="text" value="去除聚焦,不能输入文本" onfocus="this.blur();">

input输入数字和长度限制

1.type=’number’ 限制输入为数字,oninput判断限制长度(发现用了type=’number’之后maxlength就不能用了)

1

<input class="inputs" type="number" value="只输入数字,长度11位" oninput="if(value.length>11)value=value.slice(0,11)"  />

2.用maxlength限制长度,oninput限制输入框为纯数字

1

<input type="text" placeholder="请输入您的手机号" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11">

a、onkeyup = “value=value.replace(/[^\d]/g,”)”

使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

b、onchange = “value=value.replace(/[^\d]/g,”)”

使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

c、oninput = “value=value.replace(/[^\d]/g,”)”

使用 oninput 事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。

推荐学习:《HTML视频教程》

以上就是html5 input 禁止输入怎么实现的详细内容,更多请关注php中文网其它相关文章!

 

—–文章转载自PHP中文网如有侵权请联系2827785621@qq.com删除

下载声明:
  • 本站资源来源于用户分享、互换、购买以及网络收集等渠道,本站不提供任何技术服务及有偿服务,资源仅提供给大家学习研究请勿作它用。
  • 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持,如果你喜欢该程序,请购买正版!
版权声明:
  • 下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益,请提交版权证明文件至邮箱56ziyuan#gmail.com(将#替换为@)站长将会在三个工作日内为您删除。
免责声明:
  • 您好,本站所有资源(包括但不限于:源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来,并未取得原始权利人授权,因此禁止一切商用行为,仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除,一切因下载人使用所引起的法律相关责任,包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读,理解、同意以上内容,如对以上内容持有异议,请勿下载,谢谢配合!支持正版,人人有责,如不慎对您的合法权益构成侵犯,请联系我们对相应内容进行删除,谢谢!