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

Question

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

我正在创建一个网页，其中有一个输入文本字段，其中只允许(0，1，2，3，4，5…9)0-9这样的数字字符。

我如何使用jQuery来完成这个任务？

Answer 1

下面是我使用的函数：//&nbsp;Numeric&nbsp;only&nbsp;control&nbsp;handlerjQuery.fn.ForceNumericOnly&nbsp;=function(){ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.each(function() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).keydown(function(e) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;key&nbsp;=&nbsp;e.charCode&nbsp;||&nbsp;e.keyCode&nbsp;||&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;allow&nbsp;backspace,&nbsp;tab,&nbsp;delete,&nbsp;enter,&nbsp;arrows,&nbsp;numbers&nbsp;and&nbsp;keypad&nbsp;numbers&nbsp;ONLY &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;home,&nbsp;end,&nbsp;period,&nbsp;and&nbsp;numpad&nbsp;decimal &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key&nbsp;==&nbsp;8&nbsp;||&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key&nbsp;==&nbsp;9&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key&nbsp;==&nbsp;13&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key&nbsp;==&nbsp;46&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key&nbsp;==&nbsp;110&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key&nbsp;==&nbsp;190&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(key&nbsp;>=&nbsp;35&nbsp;&&&nbsp;key&nbsp;<=&nbsp;40)&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(key&nbsp;>=&nbsp;48&nbsp;&&&nbsp;key&nbsp;<=&nbsp;57)&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(key&nbsp;>=&nbsp;96&nbsp;&&&nbsp;key&nbsp;<=&nbsp;105)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;});};然后，您可以通过以下操作将其附加到您的控件：$("#yourTextBoxName").ForceNumericOnly();

Answer 2

您只需使用一个简单的JavaScript正则表达式来测试纯数字字符：/^[0-9]+$/.test(input);如果输入为数字，则返回true；如果输入不是，则返回false。或者对于事件密钥，只需在下面简单使用：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Allow:&nbsp;backspace,&nbsp;delete,&nbsp;tab,&nbsp;escape,&nbsp;enter,&nbsp;ctrl+A&nbsp;and&nbsp;. &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($.inArray(e.keyCode,&nbsp;[46,&nbsp;8,&nbsp;9,&nbsp;27,&nbsp;13,&nbsp;110,&nbsp;190])&nbsp;!==&nbsp;-1&nbsp;|| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Allow:&nbsp;Ctrl+A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(e.keyCode&nbsp;==&nbsp;65&nbsp;&&&nbsp;e.ctrlKey&nbsp;===&nbsp;true)&nbsp;||&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Allow:&nbsp;home,&nbsp;end,&nbsp;left,&nbsp;right &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(e.keyCode&nbsp;>=&nbsp;35&nbsp;&&&nbsp;e.keyCode&nbsp;<=&nbsp;39))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;let&nbsp;it&nbsp;happen,&nbsp;don't&nbsp;do&nbsp;anything &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;charValue&nbsp;=&nbsp;String.fromCharCode(e.keyCode) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;,&nbsp;valid&nbsp;=&nbsp;/^[0-9]+$/.test(charValue); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!valid)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;}