这篇“html5 input禁止输入如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“html5 input禁止输入如何实现”文章吧。
html5 input禁止输入的实现方法:1、通过readonly规定输入字段为只读可复制;2、通过disabled实现被禁用的input元素可复制,但不能接收焦点;3、通过控制input的max length为0实现;4、通过“οnfοcus="this.blur();"”实现不能输入文本即可。
html中input禁止输入(禁止获得焦点)多种方法及input限制数字和长度
input禁止输入(禁止获得焦点)
readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。
<input type="text" value="禁止输入,可以使用Tab键切换到该字段" readonly="readonly">
disabled 被禁用的 input 元素可复制,不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden"> 一起使用。
<input type="text" value="可复制,不能接收焦点,字的颜色会变成灰" disabled="disabled">
通过控制input的max length为0实现
<input type="text" maxlength="0">
οnfοcus="this.blur();"onfocuse是聚焦的意思,当你把光标放在文本框上输入的时候,就是聚焦,但这里添加了"this.blur()",blur的作用就是去除聚焦,也就是你不能把光标放在这个文本框上,换句话说就是你不能输入文本了
<input type="text" value="去除聚焦,不能输入文本" onfocus="this.blur();">
input输入数字和长度限制
type='number' 限制输入为数字,oninput判断限制长度(发现用了type='number'之后maxlength就不能用了)
<input class="inputs" type="number" value="只输入数字,长度11位" oninput="if(value.length>11)value=value.slice(0,11)" />
用maxlength限制长度,oninput限制输入框为纯数字
<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 事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。
以上就是关于“html5 input禁止输入如何实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。