限制input文本框可以输入的字符,不影响光标移动
分类 网站技术/村民张先生 发布于 2017-07-17 04:00
例:限制文本框只能输入数字(用于手机号、QQ等数字输入),通常情况下可用以下代码:
<input type="text" name="qq" id="qq" maxlength="11" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" onblur="this.value=this.value.replace(/[^0-9]/g,'')">
其中 onkeyup 用于删除输入过程中键入的非数字,onaferpaste 用于删除Ctrl+V粘贴进入的非数字,但鼠标右键粘贴进入的非数字无法删除,因此再增加一个 onblur ,当文本框失去焦点时删除非数字。
以上代码会存在一个问题,该输入框无法被全选,也无法移动光标。我们可以给 onkeyup 里的代码增加一个 if 来解决,最终代码为:
<input type="text" name="qq" id="qq" maxlength="11" onkeyup="if(/[^0-9]/g.test(this.value)){this.value=this.value.replace(/[^0-9]/g,'')}" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" onblur="this.value=this.value.replace(/[^0-9]/g,'')">
欢迎谈谈你的看法(无须登录) *正文中请勿包含"http://"否则将被拦截