如何使用jQuery在HTML输入框中只允许数字(0-9)?

我正在创建一个网页,其中有一个输入文本字段,我只希望允许使用数字字符,如(0,1,2,3,4,5…9)0-9

如何使用jQuery实现这一点

注意:这是一个更新的答案。下面的注释指的是一个旧版本,它把钥匙码弄得乱七八糟。

jQuery

自己在JSFiddle上试试。

没有本机jQuery实现,但是您可以过滤文本的输入值<输入&gt使用以下inputFilter插件(支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同的键盘布局以及自IE 9以来的所有浏览器):

//将匹配元素集的输入限制为给定的inputFilter函数。
(函数($){
$.fn.inputFilter=函数(inputFilter){
返回此参数。on(“输入键向下键向上键向下键鼠标向下键向下鼠标右键选择上下文菜单下拉”,函数(){
if(inputFilter(this.value)){
this.oldValue=this.value;
this.oldSelectionStart=this.selectionStart;
this.oldSelectionEnd=this.selectionEnd;
}else if(this.hasOwnProperty(“oldValue”)){
this.value=this.oldValue;
this.setSelectionRange(this.oldSelectionStart、this.oldSelectionEnd);
}否则{
此值为“”;
}
});
};
}(jQuery));

您现在可以使用inputFilter插件安装输入过滤器:

$(文档).ready(函数(){
$(“#myTextBox”).inputFilter(函数(值){
return/^\d*$/.test(value);//使用RegExp仅允许数字
});
});

有关更多输入过滤器示例,请参见JSFIDLE演示。还要注意,您仍然必须执行服务器端验证

纯JavaScript(没有jQuery)

实际上并不需要jQuery,您也可以用纯JavaScript做同样的事情。看看这个答案

HTML 5

HTML5有一个带有的本机解决方案<输入类型=“编号”&gt(请参见规范),但请注意,浏览器支持各不相同:

  • 大多数浏览器只会在提交表单时验证输入,而不会在键入时验证输入
  • 大多数移动浏览器不支持步骤minmax属性
  • Chrome(版本71.0.3578.98)仍然允许用户在字段中输入字符ee。也看这个问题
  • Firefox(64.0版)和Edge(EdgeHTML 17.17134版)仍然允许用户在字段中输入任何文本

你自己在w3schools.com上试试吧

发表评论