老张小站

  1. 欢迎光临

    感谢访问老张的博客!

  • 1
1,891

限制input文本框可以输入的字符,不影响光标移动

分类 网站技术/村民张先生 发布于 2017-07-17 04:00
0

例:限制文本框只能输入数字(用于手机号、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,'')">
欢迎转载分享,转载请注明 来源:大张小站 https://www.zhang.cq.cn/20171857.html
若您喜欢这篇文章,欢迎订阅老张小站以获得最新内容。 / 欢迎交流探讨,请发电子邮件至 mail[at]vdazhang.com 。


欢迎谈谈你的看法(无须登录) *正文中请勿包含"http://"否则将被拦截