小开

最佳答案

javascript

您可以使用以下setInputFilter功能过滤文本<input>的输入值（支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入键、插入符号位置、不同的键盘布局、有效性错误消息和自IE 9以来的所有浏览器）：

// Restricts input for the given textbox to the given inputFilter function.function setInputFilter(textbox, inputFilter, errMsg) {[ "input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout" ].forEach(function(event) {textbox.addEventListener(event, function(e) {if (inputFilter(this.value)) {// Accepted value.if ([ "keydown", "mousedown", "focusout" ].indexOf(e.type) >= 0){this.classList.remove("input-error");this.setCustomValidity("");}
this.oldValue = this.value;this.oldSelectionStart = this.selectionStart;this.oldSelectionEnd = this.selectionEnd;}else if (this.hasOwnProperty("oldValue")) {// Rejected value: restore the previous one.this.classList.add("input-error");this.setCustomValidity(errMsg);this.reportValidity();this.value = this.oldValue;this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);}else {// Rejected value: nothing to restore.this.value = "";}});});}

您现在可以使用setInputFilter函数安装输入过滤器：

setInputFilter(document.getElementById("myTextBox"), function(value) {return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp.}, "Only digits and '.' are allowed");

将您喜欢的样式应用于input-error类。这是一个建议：

.input-error{outline: 1px solid red;}

注意你仍然必须进行服务器端验证！

另一个警告是，这将破坏撤消堆栈，因为它直接设置this.value。这意味着CtrlZ在键入无效字符后无法撤消输入。

Demo

有关更多输入过滤器示例，请参阅jsfiddle演示或运行下面的Stack片段：

// Restricts input for the given textbox to the given inputFilter.function setInputFilter(textbox, inputFilter, errMsg) {[ "input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout" ].forEach(function(event) {textbox.addEventListener(event, function(e) {if (inputFilter(this.value)) {// Accepted value.if ([ "keydown", "mousedown", "focusout" ].indexOf(e.type) >= 0) {this.classList.remove("input-error");this.setCustomValidity("");}        
this.oldValue = this.value;this.oldSelectionStart = this.selectionStart;this.oldSelectionEnd = this.selectionEnd;}else if (this.hasOwnProperty("oldValue")) {// Rejected value: restore the previous one.this.classList.add("input-error");this.setCustomValidity(errMsg);this.reportValidity();this.value = this.oldValue;this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);}else {// Rejected value: nothing to restore.this.value = "";}});});}
// Install input filters.setInputFilter(document.getElementById("intTextBox"), function(value) {return /^-?\d*$/.test(value);}, "Must be an integer");setInputFilter(document.getElementById("uintTextBox"), function(value) {return /^\d*$/.test(value);}, "Must be an unsigned integer");setInputFilter(document.getElementById("intLimitTextBox"), function(value) {return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500);}, "Must be between 0 and 500");setInputFilter(document.getElementById("floatTextBox"), function(value) {return /^-?\d*[.,]?\d*$/.test(value);}, "Must be a floating (real) number");setInputFilter(document.getElementById("currencyTextBox"), function(value) {return /^-?\d*[.,]?\d{0,2}$/.test(value);}, "Must be a currency value");setInputFilter(document.getElementById("latinTextBox"), function(value) {return /^[a-z]*$/i.test(value);}, "Must use alphabetic latin characters");setInputFilter(document.getElementById("hexTextBox"), function(value) {return /^[0-9a-f]*$/i.test(value);}, "Must use hexadecimal characters");

.input-error {outline: 1px solid red;}

<h2>JavaScript input filter showcase</h2><p>Supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, and <a href="https://caniuse.com/#feat=input-event" target="_blank">all browsers since IE 9</a>.</p><p>There is also a <a href="https://jsfiddle.net/emkey08/tvx5e7q3" target="_blank">jQuery version</a> of this.</p><table><tr><td>Integer</td><td><input id="intTextBox"></td></tr><tr><td>Integer &gt;= 0</td><td><input id="uintTextBox"></td></tr><tr><td>Integer &gt;= 0 and &lt;= 500</td><td><input id="intLimitTextBox"></td></tr><tr><td>Float (use . or , as decimal separator)</td><td><input id="floatTextBox"></td></tr><tr><td>Currency (at most two decimal places)</td><td><input id="currencyTextBox"></td></tr><tr><td>A-Z only</td><td><input id="latinTextBox"></td></tr><tr><td>Hexadecimal</td><td><input id="hexTextBox"></td></tr></table>

TypeScript

这是一个TypeScript版本。

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout" ].forEach(function(event) {textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & { oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null }) {if (inputFilter(this.value)) {this.oldValue = this.value;this.oldSelectionStart = this.selectionStart;this.oldSelectionEnd = this.selectionEnd;}else if (Object.prototype.hasOwnProperty.call(this, "oldValue")) {this.value = this.oldValue;        
if (this.oldSelectionStart !== null &&this.oldSelectionEnd !== null) {this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);}}else {this.value = "";}});});}

jQuery

还有一个jQuery版本。请参阅这个答案。

HTML5

HTML5有一个<input type="number">的本地解决方案（参见产品规格和留档）。留档有一个这种输入类型的工作演示。

不是读取value属性，而是读取输入的#1属性以获取类型化值作为数量而不是字符串。
建议在<form>内使用，因为这样更容易验证；例如，如果值无效，按输入将自动显示错误消息。
- 您可以在整个表单上使用#0方法或#1方法来显式检查有效性。
- 请注意，您可能需要使用required属性来禁止空输入。
您可以在输入元素本身上使用#0方法或#1属性来显式检查有效性。
您可以使用#0显示错误消息，并使用#1设置您自己的消息。

这种方法从根本上具有不同的用户体验：您可以输入无效字符，并且执行分别验证。这样做的好处是撤消堆栈（CtrlZ）不会中断。请注意，无论您选择哪种方法，都必须执行服务器端验证。

但请注意，浏览器支持各不相同：

大多数浏览器只会在提交表单时验证输入，而不是在键入时验证输入。
大多数移动浏览器不支持step、min和max属性。
Chrome（版本71.0.3578.98）仍然允许用户在字段中输入字符e和E。另请参阅问答为什么超文本标记语言输入#2允许在字段中输入字母#0？。
Firefox（版本64.0）和Edge（EdgeHTML版本17.17134）仍然允许用户在字段中输入任何文本。

Demo

document.querySelector("form").addEventListener("submit", (event) => {event.preventDefault();console.log(`Submit!Number is ${event.target.elements.number.valueAsNumber},integer is ${event.target.elements.integer.valueAsNumber},form data is ${JSON.stringify(Object.fromEntries(new FormData(event.target).entries()))}.`);})

label {display: block;}

<form><fieldset><legend>Get a feel for the UX here:</legend><label>Enter any number: <input name="number" type="number" step="any" required></label><label>Enter any integer: <input name="integer" type="number" step="1" required></label><label>Submit: <input name="submitter" type="submit"></label></fieldset></form>

小开

2解决方案：

使用表单验证器（例如jQuery验证插件）

在输入字段的onblur（即当用户离开字段时）事件期间使用正则表达式进行检查：

<script type="text/javascript">function testField(field) {var regExpr = new RegExp("^\d*\.?\d*$");if (!regExpr.test(field.value)) {// Case of errorfield.value = "";}}
</script>
<input type="text" ... onblur="testField(this);"/>

小开

您可以尝试使用'onkeydown'事件并取消事件（event.prevent默认值或类似的东西），当它不是允许的键之一时。

小开

您可以附加到key down事件，然后根据需要过滤键，例如：

<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);"  type="text">

实际的JavaScript处理程序将是：

function validateNUM(e,field){var key = getKeyEvent(e)if (specialKey(key)) return true;if ((key >= 48 && key <= 57) || (key == 46)){if (key != 46)return true;else{if (field.value.search(/\./) == -1 && field.value.length > 0)return true;elsereturn false;}}
function getKeyEvent(e){var keynumvar keycharvar numcheckif(window.event) // IEkeynum = e.keyCodeelse if(e.which) // Netscape/Firefox/Operakeynum = e.whichreturn keynum;}

小开

使用此DOM

<input type='text' onkeypress='validate(event)' />

还有这个剧本

function validate(evt) {var theEvent = evt || window.event;
// Handle pasteif (theEvent.type === 'paste') {key = event.clipboardData.getData('text/plain');} else {// Handle key pressvar key = theEvent.keyCode || theEvent.which;key = String.fromCharCode(key);}var regex = /[0-9]|\./;if( !regex.test(key) ) {theEvent.returnValue = false;if(theEvent.preventDefault) theEvent.preventDefault();}}

小开

请记住区域差异（欧元使用句号和逗号的方式与美国相反），加上减号（或在括号中包装数字以表示负数的惯例），加上指数符号（我正在讨论这个问题）。

小开

HTML5有<input type=number>，这听起来很适合您。目前，只有Opera本地支持它，但有一个项目具有JavaScript实现。

小开

谢谢大家，真的帮到我了！

我发现Perfert对数据库非常有用。

function numonly(root){var reet = root.value;var arr1=reet.length;var ruut = reet.charAt(arr1-1);if (reet.length > 0){var regex = /[0-9]|\./;if (!ruut.match(regex)){var reet = reet.slice(0, -1);$(root).val(reet);}}}

然后添加eventhandler：

onkeyup="numonly(this);"

小开

还有一个例子，这对我很有用：

function validateNumber(event) {var key = window.event ? event.keyCode : event.which;if (event.keyCode === 8 || event.keyCode === 46) {return true;} else if ( key < 48 || key > 57 ) {return false;} else {return true;}};

还附加到按键事件

$(document).ready(function(){$('[id^=edit]').keypress(validateNumber);});

超文本标记语言：

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

这是一个jsFiddle示例

小开

如果您想建议设备（可能是手机）在字母或数字之间，您可以使用<input type="number">。

小开

我一直在努力寻找一个好的答案，我们迫切需要<input type="number"，但除此之外，这两个是我能想到的最简洁的方法：

<input type="text"onkeyup="this.value=this.value.replace(/[^\d]/,'')">

如果您不喜欢未接受的字符在被删除之前显示一秒钟，下面的方法是我的解决方案。请注意许多附加条件，这是为了避免禁用各种导航和热键。如果有人知道如何压缩这个，让我们知道！

<input type="text"onkeydown="return ( event.ctrlKey || event.altKey|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)|| (95<event.keyCode && event.keyCode<106)|| (event.keyCode==8) || (event.keyCode==9)|| (event.keyCode>34 && event.keyCode<40)|| (event.keyCode==46) )">

小开

这是一个改进的功能：

function validateNumber(evt) {var theEvent = evt || window.event;var key = theEvent.keyCode || theEvent.which;if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){theEvent.returnValue = false;if (theEvent.preventDefault) theEvent.preventDefault();}}

小开

一个简短而甜蜜的实现，使用jQuery和替换（）而不是查看event.key代码或event.which：

$('input.numeric').live('keyup', function(e) {$(this).val($(this).val().replace(/[^0-9]/g, ''));});

只有很小的副作用，键入的字母暂时出现，CTRL/CMD+A似乎表现得有点奇怪。

小开

HTML5支持正则表达式，因此您可以使用：

<input id="numbersOnly" pattern="[0-9.]+" type="text">

警告：某些浏览器还不支持此功能。

小开

更安全的方法是检查输入的值，而不是劫持按键并尝试过滤keyCodes。

通过这种方式，用户可以自由使用键盘箭头、修改键、退格、删除、使用非标准键盘、使用鼠标粘贴、使用拖放文本，甚至使用辅助功能输入。

下面的脚本允许正数和负数

110100.0100.01-1-1.0-10.001.0.0 //not allowed

var input = document.getElementById('number');input.onkeyup = input.onchange = enforceFloat;
//enforce that only a float can be inputedfunction enforceFloat() {var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;if (!valid.test(this.value)) {var n = this.value.match(number);this.value = n ? n[0] : '';}}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

EDIT: I removed my old answer because I think it is antiquated now.

小开

您还可以将输入值（默认情况下被视为字符串）与强制为数字的自身进行比较，例如：

if(event.target.value == event.target.value * 1) {// returns true if input value is numeric string}

但是，您需要将其绑定到keyup等事件。

小开

只是使用jQuery的另一个变体

$(".numeric").keypress(function() {return (/\d/.test(String.fromCharCode(event.which) ))});

小开

您可以将Shurok函数替换为：

$(".numeric").keypress(function() {return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))});

小开

我意识到一个旧的帖子，但我认为这可以帮助某人。最近，我不得不将输入框限制为小数点后5位。在我的情况下，用户输入必须小于0.1

<input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText"  name="textfield" onkeyup="return doCheck('#fmargin',event);">

这是doCheck函数

function doCheck(id,evt){var temp=parseFloat($(id).val());
if (isNaN(temp))temp='0.0';if (temp==0)temp='0.0';
$(id).val(temp);}

这里是相同的功能，除了强制整数输入

function doCheck(id,evt){var temp=parseInt($(id).val());
if (isNaN(temp))temp='0';
$(id).val(temp);}

希望能帮到别人

小开

JavaScript代码：

function validate(evt){if(evt.keyCode!=8){var theEvent = evt || window.event;var key = theEvent.keyCode || theEvent.which;key = String.fromCharCode(key);var regex = /[0-9]|\./;if (!regex.test(key)){theEvent.returnValue = false;
if (theEvent.preventDefault)theEvent.preventDefault();}}}

超文本标记语言代码：

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

完美的作品，因为退格键码是8和正则表达式不允许它，所以它是一个简单的方法来绕过bug：）

小开

这是geowa4解决方案的扩展版本。支持min和max属性。如果数字超出范围，将显示以前的值。

你可以在这里测试。

用法：<input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {var theEvent = e || window.event;var key = theEvent.keyCode || theEvent.which;if(key!=13&&key!=9){//allow enter and tabkey = String.fromCharCode( key );var regex = /[0-9]|\./;if( !regex.test(key)) {theEvent.returnValue = false;if(theEvent.preventDefault) theEvent.preventDefault();}}}
$(document).ready(function(){$("input[type=text]").filter(".number,.NUMBER").on({"focus":function(e){$(e.target).data('oldValue',$(e.target).val());},"keypress":function(e){e.target.oldvalue = e.target.value;number(e);},"change":function(e){var t = e.target;var min = $(t).attr("min");var max = $(t).attr("max");var val = parseInt($(t).val(),10);if( val<min || max<val){alert("Error!");$(t).val($(t).data('oldValue'));}
}});});

如果输入是动态的，请使用：

$(document).ready(function(){$("body").on("focus","input[type=text].number,.NUMBER",function(e){$(e.target).data('oldValue',$(e.target).val());});$("body").on("keypress","input[type=text].number,.NUMBER",function(e){e.target.oldvalue = e.target.value;number(e);});$("body").on("change","input[type=text].number,.NUMBER",function(e){var t = e.targetvar min = $(t).attr("min");var max = $(t).attr("max");var val = parseInt($(t).val());if( val<min || max<val){alert("Error!");$(t).val($(t).data('oldValue'));}});});

小开

最好的方法（允许所有类型的数字-实数负，实数正，iinteger负，整数正）是：

$(input).keypress(function (evt){var theEvent = evt || window.event;var key = theEvent.keyCode || theEvent.which;key = String.fromCharCode( key );var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)var objRegex = /^-?\d*[\.]?\d*$/;var val = $(evt.target).val();if(!regex.test(key) || !objRegex.test(val+key) ||!theEvent.keyCode == 46 || !theEvent.keyCode == 8) {theEvent.returnValue = false;if(theEvent.preventDefault) theEvent.preventDefault();};});

小开

javascript

function validateNumber(evt) {var e = evt || window.event;var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&// numberskey >= 48 && key <= 57 ||// Numeric keypadkey >= 96 && key <= 105 ||// Backspace and Tab and Enterkey == 8 || key == 9 || key == 13 ||// Home and Endkey == 35 || key == 36 ||// left and right arrowskey == 37 || key == 39 ||// Del and Inskey == 46 || key == 45) {// input is VALID}else {// input is INVALIDe.returnValue = false;if (e.preventDefault) e.preventDefault();}}

另外，您可以添加逗号，句点和减号（，.-）

  // comma, period and minus, . on keypadkey == 190 || key == 188 || key == 109 || key == 110 ||

超文本标记语言

<input type="text" onkeydown="validateNumber(event);"/ >

小开

我对它进行了一些调整，但它需要更多的工作来符合JavaScript奇怪的方式。

function validateNumber(myEvent,decimal) {var e = myEvent || window.event;var key = e.keyCode || e.which;
if (e.shiftKey) {} else if (e.altKey) {} else if (e.ctrlKey) {} else if (key === 48) { // 0} else if (key === 49) { // 1} else if (key === 50) { // 2} else if (key === 51) { // 3} else if (key === 52) { // 4} else if (key === 53) { // 5} else if (key === 54) { // 6} else if (key === 55) { // 7} else if (key === 56) { // 8} else if (key === 57) { // 9
} else if (key === 96) { // Numeric keypad 0} else if (key === 97) { // Numeric keypad 1} else if (key === 98) { // Numeric keypad 2} else if (key === 99) { // Numeric keypad 3} else if (key === 100) { // Numeric keypad 4} else if (key === 101) { // Numeric keypad 5} else if (key === 102) { // Numeric keypad 6} else if (key === 103) { // Numeric keypad 7} else if (key === 104) { // Numeric keypad 8} else if (key === 105) { // Numeric keypad 9
} else if (key === 8) { // Backspace} else if (key === 9) { // Tab} else if (key === 13) { // Enter} else if (key === 35) { // Home} else if (key === 36) { // End} else if (key === 37) { // Left Arrow} else if (key === 39) { // Right Arrow} else if (key === 190 && decimal) { // decimal} else if (key === 110 && decimal) { // period on keypad// } else if (key === 188) { // comma} else if (key === 109) { // minus} else if (key === 46) { // Del} else if (key === 45) { // Ins} else {e.returnValue = false;if (e.preventDefault) e.preventDefault();}}

然后它被称为via：

$('input[name=Price]').keydown(function(myEvent) {validateNumber(myEvent,true);});

小开

使用jQuery的另一种简单方法：

$('.Numeric').bind('keydown',function(e){if (e.which < 48 || e.which > 57)return false;return true;})

现在只需要将每个输入类设置为数字，例如：

<input type="text" id="inp2" name="inp2" class='Numeric' />

小开

这会立即删除任何坏字符，只允许一个点，很短，并允许退格等：

$('.numberInput').keyup(function () {s=$(this).val();if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));});

小开

//在JavaScript函数中（可以使用超文本标记语言或PHP）。

function isNumberKey(evt){var charCode = (evt.which) ? evt.which : evt.keyCode;if (charCode > 31 && (charCode < 48 || charCode > 57))return false;return true;}

在您的表单输入中：

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

输入最大值。（上面的这些允许12位数字）

小开

使用此DOM：

<input type = "text" onkeydown = "validate(event)"/>

这个脚本：

validate = function(evt){if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1){evt.returnValue = false;if(evt.preventDefault){evt.preventDefault();}}}

…或者这个脚本，没有indexOf，使用两个for…

validate = function(evt){var CharValidate = new Array("08", "046", "039", "948", "235");var number_pressed = false;for (i = 0; i < 5; i++){for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++){if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount){number_pressed = true;}}}if (number_pressed == false){evt.returnValue = false;if(evt.preventDefault){evt.preventDefault();}}}

我使用onkeydown属性而不是onkeypress，因为onkeydown属性在onkeypress属性之前被检查。问题将出在GoogleChrome浏览器中。

使用属性“onkeypress”，标签将无法在谷歌Chrome上使用“预防默认值”，但是，使用属性“onkeydown”，标签变得可控！

TAB=>9的ASCII码

第一个脚本的代码比第二个脚本少，但是，ASCII字符数组必须具有所有键。

第二个脚本比第一个脚本大得多，但数组不需要所有键。数组每个位置的第一位数字是每个位置将被读取的次数。对于每次读取，将增1到下一个。例如：

nCount=0

48+NCount=48

nCount++

48+N=49

nCount++

…

48+N=57

在数字键的情况下只有10（0-9），但如果它们是100万创建一个包含所有这些键的数组是没有意义的。

ASCII码：

8==>（退格）；
46=>（删除）；
37=>（左箭头）；
39=>（右箭头）；
48-57=>（数字）；
36=>（家）；
35=>（结束）；

小开

准备好验证什么时调用此函数。我在这里使用了一个文本框

超文本标记语言：

<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />

在我的JavaScript代码中：

function check(num){var onlynumbers = truefor (var i = 0; i < (num.length - 1); i++) {if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {alert("please make sure that only numbers have been entered in the Quantaty box");onlynumbers = false}}if (onlynumbers == true) {
//Execute Code}}

小开

我选择使用这里提到的两个答案的组合。

<input type="number" />

和

function isNumberKey(evt){var charCode = (evt.which) ? evt.which : evt.keyCodereturn !(charCode > 31 && (charCode < 48 || charCode > 57));}

<input type="text" onkeypress="return isNumberKey(event);">

小开

<input name="amount" type="text" value="Only number in here"/>
<script>$('input[name=amount]').keyup(function(){$(this).val($(this).val().replace(/[^\d]/,''));});</script>

小开

正则表达式和匹配函数可以很好地处理这种情况。例如，我使用以下代码来验证作为图形坐标的4个输入框。它工作得相当好。

function validateInput() {if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");location.reload();}}

小开

input type="number"是一个HTML5属性。

在其他情况下，这将帮助您：

function isNumberKey(evt){var charCode = (evt.which) ? evt.which : evt.keyCodeif (charCode > 31 && (charCode < 48 || charCode > 57))return false;return true;}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

小开

您可以为此使用模式：

<input id="numbers" pattern="[0-9.]+" type="number">

在这里你可以看到完整的手机网站界面提示

小开

function digitsOnly(obj) {obj.value = obj.value.replace(/\D/g, "");}

和元素

<input type="text" onkeyup="digitsOnly(this);" />

小开

是的，HTML5可以。尝试此代码（w3School）：

<!DOCTYPE html><html><body>
<form action="">Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" /><input type="submit" /></form>
</body></html>

小开

我使用可以从NuGet下载的jquery.inputmask.js库。更具体地说，我使用它附带的jquery.inputmask.regex.extensions.js。

我给输入元素一个类，在这种情况下reg：

<input type="number" id="WorkSrqNo" name="WorkSrqNo" maxlength="6" class="reg"/>

然后在JavaScript中设置掩码：

var regexDigitsOnly = "^[0-9]*$";$('input.reg').inputmask('Regex', { regex: regexDigitsOnly });

这仅适用于数字，但您可以更改正则表达式以接受“.”。

通过使用它，不可能输入不是数字的字符。使用这些输入掩码库进行一般格式化很有用。

小开

如果您可以使用插件，这是我测试的一个。除了粘贴之外，它运行良好。

数字输入

这是一个演示http://jsfiddle.net/152sumxu/2

下面的代码（Lib在线粘贴）

<div id="plugInDemo" class="vMarginLarge"><h4>Demo of the plug-in    </h4><div id="demoFields" class="marginSmall"><div class="vMarginSmall"><div>Any Number</div><div><input type="text" id="anyNumber" /></div></div></div></div>
<script type="text/javascript">//    Author: Joshua De Leon - File: numericInput.js - Description: Allows only numeric input in an element. - If you happen upon this code, enjoy it, learn from it, and if possible please credit me: www.transtatic.com(function(b) {var c = { allowFloat: false, allowNegative: false};b.fn.numericInput = function(e) {var f = b.extend({}, c, e);var d = f.allowFloat;var g = f.allowNegative;this.keypress(function(j) {var i = j.which;var h = b(this).val();if (i>0 && (i<48 || i>57)) {if (d == true && i == 46) {if (g == true && a(this) == 0 && h.charAt(0) == "-") {return false}if (h.match(/[.]/)) {return false}}else {if (g == true && i == 45) {if (h.charAt(0) == "-") {return false}if (a(this) != 0) {return false}}else {if (i == 8) {return true}else {return false}}}}else {if (i>0 && (i >= 48 && i <= 57)) {if (g == true && h.charAt(0) == "-" && a(this) == 0) {return false}}}});return this};function a(d) {if (d.selectionStart) {return d.selectionStart}else {if (document.selection) {d.focus();var f = document.selection.createRange();if (f == null) {return 0}var e = d.createTextRange(), g = e.duplicate();e.moveToBookmark(f.getBookmark());g.setEndPoint("EndToStart", e);return g.text.length}}return 0}}(jQuery));
$(function() {$("#anyNumber").numericInput({ allowFloat: true, allowNegative: true });});</script>

小开

用途：

<script>function onlyNumber(id){var DataVal = document.getElementById(id).value;document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');}</script><input type="text" id="1" name="1" onChange="onlyNumber(this.id);">

如果您想在按下键后更新值，您可以将onChange更改为onKeypress、onKeyDown或onKeyup。但事件onKeypress不会在任何浏览器中运行。

小开

这是一个简单的方法，它只允许一个小数，但不能更多。输入事件使用regex根据两种模式动态替换文本：

删除任何不是数字或点的东西
删除一个点的任何第二个实例

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />

As someone commented below, the solution above does not handle leading zeros. If your particular use case requires that these are not allowed you can add to the pattern above like so:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

这将允许0.123或.123，但不允许0123或00.123。

小开

这里的大多数答案都有使用关键事件的弱点

许多答案会限制你使用键盘宏进行文本选择的能力，复制+粘贴和更多不需要的行为，其他人似乎依赖于特定的jQuery插件，这是用机枪杀死苍蝇。

这个简单的解决方案似乎最适合我跨平台，无论输入机制（击键，复制+粘贴，右键单击复制+粘贴，语音到文本等）。所有文本选择键盘宏仍然有效，它甚至会限制通过脚本设置非数值的能力。

function forceNumeric(){var $input = $(this);$input.val($input.val().replace(/[^\d]+/g,''));}$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

小开

下面的代码还将检查粘贴事件。
取消注释“ruleSetArr_4”并将（conate）添加到“规则设置”以允许浮动个数字。
简单的复制/粘贴功能。使用参数中的输入元素调用它。
示例：inputIntTypeOnly($('input[name="inputName"]'))

function inputIntTypeOnly(elm){elm.on("keydown",function(event){var e = event || window.event,key = e.keyCode || e.which,ruleSetArr_1 = [8,9,46], // backspace,tab,deleteruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57],	// top keyboard num keysruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keysruleSetArr_4 = [17,67,86],	// Ctrl & V//ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float valuesruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4);	// merge arrays of keys		
if(ruleSetArr.indexOf() !== "undefined"){	// check if browser supports indexOf() : IE8 and earliervar retRes = ruleSetArr.indexOf(key);} else {var retRes = $.inArray(key,ruleSetArr);};if(retRes == -1){	// if returned key not found in array, return falsereturn false;} else if(key == 67 || key == 86){	// account for paste eventsevent.stopPropagation();};
}).on('paste',function(event){var $thisObj = $(this),origVal = $thisObj.val(),	// orig valuenewVal = event.originalEvent.clipboardData.getData('Text');	// paste clipboard valueif(newVal.replace(/\D+/g, '') == ""){	// if paste value is not a number, insert orig value and ret false$thisObj.val(origVal);return false;} else {$thisObj.val(newVal.replace(/\D+/g, ''));return false;};		
});};
var inptElm = $('input[name="inputName"]');
inputIntTypeOnly(inptElm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><input type="text" name="inputName" value="1">

小开

对于那些喜欢单行的人。

string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

我在输入类型=“text”上使用此代码，并使用AngularJS在按键上激活，但如果愿意，您可以使用jQuery。只需将此代码放入以某种方式激活按键的函数中。

它只允许数字，数字+十进制，数字+十进制+数字。

代码

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
testOne = "kjlsgjkl983724658.346.326.326..36.346"=> "983724658.34";
testTwo = ".....346...3246..364.3.64.2346......"=> "346.";
testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"=> "3";
testFour = "622632463.23464236326324363"=> "622632463.23";

这是为美国货币构建的，但可以更改为允许超过小数点后第一位的两个小数，如下所示…

更改代码

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');
testFour = "dfskj345346346.36424362jglkjsg....."=> "345346346.36424362";

：）

小开

我正在寻找一种方法来阻止数字的输入，然后，因为我没有在答案中找到它，这段代码对我来说很好。

我只需要在onkeypress事件中输入它。

如果你只需要阻止数字的输入，我相信这会很好。

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"

小开

给输入字段一个类（<input class="digit" ...>）并使用jQuery，如下所示。

jQuery(document).ready(function () {jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });});

上述代码还可以禁用Ctrl+V笔画和right click笔画中的特殊字符。

小开

我个人建议使用http://www.decorplanit.com/plugin/的自动数字插件-它支持所有不同的变体，如前缀/后缀处理、货币处理、负值格式、min、max等。

小开

我可能有另一个（简单的）解决方法…

由于String.fromCharCode（键）在QWERTY键盘上返回奇怪的东西（数字键盘返回代码为g为1,1为&字符…

我已经意识到在输入中捕获keyup的最终值以将其重置为任意值是一种更简单，轻量级和防虫的方法（也可以通过一些正则表达式来完成…保留小数等…不必过滤其他Ctrl，Home，Del和enter事件…）

使用jq：

<input class='pn'><script>function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}jQuery('.pn').keyup(function(){pn(this);});</script>

Onkeyup属性：

<input onkeyup='positiveNumericInput(this)'><script>function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}</script>

小开

当涉及到防愚弄的用户体验时，应该始终尝试为“用户智能”保持一个参考点。

虽然忽略除数字之外的所有内容，圆点和连字符似乎是完美的选择，但你也应该考虑让它们输入任何内容，完成后，净化输入；如果不是有效的数字，则显示错误。这种方法可以确保无论用户设法做什么，结果总是有效的。如果用户天真到不理解警告和错误消息，按下按钮并看到什么都没有发生（如在键码比较中）只会让他/她更加困惑。

此外，对于表单，验证和错误消息显示几乎是必要的。因此，规定可能已经存在。这是算法：

在失去焦点或表单提交时，请执行以下操作。

1.1。从输入中读取内容并将parseFloat应用于结果

1.2。如果结果是不可访问数字（NaN），请重置输入字段并弹出错误信息：“请输入有效数字：例如。235或-654或321.526或-6352.646584”。

1.3。否则，如果String（结果）！==（输入的内容），将字段的值更改为结果并显示警告消息：“您的值输入已被修改。输入必须是有效的数字：例如。235或-654或321.526或-6352.646584"。对于不允许任何未经确认的值的字段，可以将此条件添加到步骤1.2中。

1.4.否则，什么都不做。

如果需要，此方法还为您提供了基于最小值、最大值、小数位数等执行验证的额外优势。只需在步骤1.2之后对结果执行这些操作。

缺点：

输入将允许用户输入任何值，直到焦点丢失或提交表单。但是，如果填写字段的说明足够清楚，在90%的情况下，这可能不会出现。

如果使用步骤1.3显示警告，则可能会被用户忽略并可能导致无意的输入提交。抛出错误或正确显示警告将解决此问题。

速度。这可能比regex方法慢几微秒。

优点：假设用户具有阅读和理解的基本知识，

高度可定制的选项。

跨浏览器工作，独立于语言。

利用表单中已有的功能来显示错误和警告。

小开

希望我不是在这里用丑陋的棍子打一匹死马，但我用这个作为我的网站数量输入，它只允许从1到99的数字。

试试看：https://jsfiddle.net/83va5sb9/

      <input min="1" type="text" id="quantity" name="quantity" value="1"onKeyUp="numbersonly()">
<script>function numbersonly() {var str = document.getElementById("quantity").valuevar newstr = ""for (i = 0; i < str.length; i++) {for (ii = 1; ii < 10; ii++) {if (str.charAt(i).indexOf(ii) > -1) {newstr += str.charAt(i)}}}if (newstr == "") {newstr = 1}if (parseInt(newstr) > 99) {newstr = 99}document.getElementById("quantity").value = newstr}
</script>

小开

我为更好的用户体验提供的解决方案：

超文本标记语言

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {$(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))})$('[type=tel]').on('keypress', function(e) {keys = ['0','1','2','3','4','5','6','7','8','9','.']return keys.indexOf(event.key) > -1})

详情：

首先，输入类型：

number显示向上/向下箭头缩小实际输入空间，我发现它们很丑，只有当数字代表一个数量时才有用（比如电话，区号，ID…不需要它们）tel提供了类似的无箭头数字浏览器验证

使用[Number/tel]还有助于在移动设备上显示数字键盘。

对于JS验证，我最终需要两个功能，一个用于正常用户输入（按键），另一个用于复制+粘贴修复（更改），其他组合会给我带来糟糕的用户体验。

我用更可靠KeyboardEvent.key代替现已弃用KeyboardEvent.char代码

根据您的浏览器支持，您可以考虑使用Array.prototype.includes（）而不是命名不佳的Array.prototype.index（）（用于真/假结果）

小开

请找到下面提到的解决方案。在此用户只能输入numeric值，此外用户无法在输入中输入copy、paste、drag和drop。

允许的字符

0,1,2,3,4,5,6,7,8,9

不允许字符和字符通过事件

字母值
特殊字符
复制
粘贴
拖动
Drop

$(document).ready(function() {$('#number').bind("cut copy paste drag drop", function(e) {e.preventDefault();});});function isNumberKey(evt) {var charCode = (evt.which) ? evt.which : evt.keyCode;if (charCode > 31 && (charCode < 48 || charCode > 57))return false;return true;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

让我知道如果它不工作。

小开

再举一个例子，可以只在输入字段中添加数字，不能个字母

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

小开

这里有一个我喜欢使用的简单解决方案：

function numeric_only (event, input) {if ((event.which < 32) || (event.which > 126)) return true;return jQuery.isNumeric ($(input).val () + String.fromCharCode (event.which));}// numeric_only;
<input type="text" onkeypress="return numeric_only (event, this);" />

说明：

使用“event.which”-首先确定它是否是一个可打印的字符。如果不是，那么允许它（对于删除和退格之类的东西）。否则，将字符连接到字符串的末尾并使用jQuery的“isNumery”函数进行测试。这消除了测试每个字符的单调乏味，也适用于剪切/粘贴场景。

如果你想变得非常可爱，那么你可以创建一个新的超文本标记语言输入类型。让我们称之为“数字”，这样你就可以拥有标签：

<input type="numeric" />

这将只允许数字字符。只需添加以下“document.ready”命令：

$(document).ready (function () {$("input[type=numeric]").keypress (function (event) {if ((event.which < 32) || (event.which > 126)) return true;return jQuery.isNumeric ($(this).val () + String.fromCharCode (event.which));});// numeric.keypress;});// document.ready;

超文本标记语言不在乎你使用什么类型名称——如果它不能识别它，那么它将默认使用文本框，所以你可以这样做。你的编辑可能会抱怨，但是，嘿，这是它的问题。毫无疑问，清教徒会抓狂，但它有效，很容易，到目前为止，它对我来说非常强大。

更新

这里有一个更好的方法：它考虑到文本选择并使用原生javascript：

verify (event) {let value = event.target.value;let new_value = `${value.substring (0, event.target.selectionStart)}${event.key}${value.substring (event.target.selectionEnd)}`;if ((event.code < 32) || (event.code > 126)) return true;if (isNaN (parseInt (new_value))) return false;return true;}// verify;

小开

现在只需使用type="数字"即可在大多数浏览器中支持此属性

<input type="number" maxlength="3" ng-bind="first">

小开

这是最简单的解决办法

将. price-输入input.quantity替换为输入字段的类

$(".price-input input.quantity").on("keypress keyup blur",function (event) {$(this).val($(this).val().replace(/[^\d].+/, ""));if ((event.which < 48 || event.which > 57)) {event.preventDefault();}});

小开

这是一个非常简短的解决方案，它不使用已弃用的keyCode或which，不阻止任何非输入键，并使用纯javascript。（在Chromium70.0.3533、Firefox 62.0和Edge 42.17134.1.0中测试）

超文本标记语言：

<input type="text" onkeypress="validate(event)">

js：

function validate(ev) {if (!ev) {ev = window.event;}
if (!ev.ctrlKey && ev.key.length === 1 && (isNaN(+ev.key) || ev.key === " ")) {return ev.preventDefault();}}

小开

解决这个问题的一个简单方法是实现一个jQuery函数来验证regex在文本框中键入的字符，例如：

您的html代码：

<input class="integerInput" type="text">

使用jQuery的js函数

$(function() {$('.integerInput').on('input', function() {this.value = this.value.replace(/[^\d]/g, '');// numbers and decimals only
});});

$(function() {$('.integerInput').on('input', function() {this.value = this.value.replace(/[^\d]/g, '');// numbers and decimals only            
});});

<scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin="anonymous"></script>
<input type="text" class="integerInput"/>

小开

这也适用于波斯和阿拉伯数字：）

 setNumericInput: function (event) {var key = window.event ? event.keyCode : event.whichif (event.keyCode === 8 ||(key >= 48 && key <= 57) ||(key >= 1776 && key <= 1785)) {return true} else {event.preventDefault()}}

小开

我看到了一些很棒的答案，但我喜欢它们尽可能小和简单，所以也许有人会从中受益。我会像这样使用javascriptNumber()和isNaN功能：

if(isNaN(Number(str))) {// ... Exception it is NOT a number} else {// ... Do something you have a number}

希望这有帮助。

小开

我完成了这个功能：

onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) return false;"

这在IE和Chrome中运行良好，我不知道为什么它在Firefox中也不能正常工作，这个功能阻止了Firefox中的tab键。

对于tab键在Firefox中正常工作，请添加以下内容：

onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(event.keyCode != 9) return false;"

小开

如果您正在尝试角这可能会有所帮助

要将输入获取为数字（带小数点），则

<input [(ngModel)]="data" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

现在这不会正确更新模型中的值要显式更改模型的值也添加此

<input [(ngModel)]="data" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" (change)="data = $event.target.value">

更改事件将在模型中的值更新后触发，因此它也可以与反应式表单一起使用。

小开

下面的函数将检查每个输入字符是否为数字。

numeric: value => {let numset = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);console.log(numset.has(value.substring(value.length - 1, value.length)));}

小开

var userName = document.querySelector('#numberField');
userName.addEventListener('input', restrictNumber);function restrictNumber (e) {var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");this.value = newValue;}

<input type="text" id="numberField">

小开

我找不到一个明确的答案，每次都不会循环整个字符串，所以在这里：

document.querySelectorAll("input").forEach(input => {input.addEventListener("input", e => {if (isNaN(Number(input.value[input.value.length-1])) && input.value[input.value.length-1] != '.') {input.value = input.value.slice(0, -1);}})});

没有正则表达式，如果不是数字或句点，则每次键入和切片时都会遍历最后一个字符。

小开

<input type="tel"onkeypress="return onlyNumberKey(event)">

在脚本标签

function onlyNumberKey(evt) {      
// Only ASCII charactar in that range allowedvar ASCIICode = (evt.which) ? evt.which : evt.keyCodeif (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))return false;return true;}

小开

有一个更简单的解决方案，以前没有人提到过：

inputmode="numeric"

小开

上面的一些答案使用了过时的内容，例如使用其中。

要检查按下的键是否是数字，您可以使用keyup事件监听器读取event.key的值。然后，如果字符不是数字，则简单地阻止键入字符。您可以将其他键列入白名单。例如，允许用户在输入字段中使用箭头向后或向前导航，或者点击退格并删除键入的数字。

validate (event) {const isNumber = isFinite(event.key)const whitelist = ['Backspace','Delete','ArrowDown','ArrowUp','ArrowRight','ArrowLeft']const whitelistKey = whitelist.includes(event.key)
if (!isNumber && !whitelistKey) {event.preventDefault()}}

小开

这是我的简单解决方案仅限React用户，我找不到更好的解决方案，我自己做了。

首先，创建一个国家。

const [tagInputVal, setTagInputVal] = useState("");

然后，使用状态作为输入值（value={tagInputVal}）并将事件传递给onChange处理程序。

<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>

然后，在onChange处理程序中设置事件的值。

function onChangeTagInput(e) {setTagInputVal(e.target.value.replace(/[^\d.]/ig, ""));}

小开

如果我知道你的问题那基本上就是答案了

<input type="number">

小开

我见过很多用javascript回答这个问题的问题，但最好的答案是使用type="number"并用css删除旋转按钮，需要这样做的大部分原因是旋转按钮在使用时不会发出change事件。

解决方案：

超文本标记语言

<input type="number" class="input-class">

css

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
/* Firefox */input[type=number] {-moz-appearance: textfield;}

小开

有一个非常好的解决方案。删除前导零，设置自然和小数位数的最大值，处理复制粘贴，确保它是一个数值。

this.value = this.value.replace(/\b0+/g, '').replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/([0-9]{0,6}(\.[0-9]{0,2})?).*/g, '$1')

最后replace设置小数和自然位的长度。只需将标记替换为您的首选值。

.replace(/([0-9]{0,<max_natural>}(\.[0-9]{0,<max_decimal>})?).*/g, '$1')

小开

这是emkey08的JavaScript Wiki答案的面向对象重新实现，它使用EventListener对象实现。（参见：MDN Web文档#0）

在某种程度上，它可以防止为每个过滤的输入元素复制匿名事件处理程序函数声明，同时仍然允许它通过可选的回调。

/*** Base input {@see Element} {@see EventListener} filter abstract class** @implements EventListener*/class AbstractInputFilter {
/*** Attach the input filter to the input {@see Element}** @param inputElement The input {@see Element} to filter* @param isValid - The callback that determines if the input is valid.* @throws Error*/constructor(inputElement, isValid = null) {// Abstract classif (this.constructor === AbstractInputFilter) {throw new Error("Object of Abstract Class cannot be created");}
if (typeof isValid === "function") {this.isValid = isValid;}
for (const event of ["input", "keydown", "keyup","mousedown", "mouseup", "select", "contextmenu", "drop"]) {inputElement.addEventListener(event, this);}}
/*** Checks the value is valid** @callback isValid default call-back that will throw* an {Error} if not implemented by extending this* {AbstractInputFilter} class.** @param value The value to check* @returns {boolean}* @throws Error*/isValid(value) {throw new Error('must be implemented by callback!');}
/*** Handles the {@see event} dispatched by* the {@see EventTarget} object from the input {@see Element}* to filter its contant while it is being filled.** @param event the {@see event} dispatched by* the {@see EventTarget} input {@see Element}* @override*/handleEvent(event) {const inputElement = event.currentTarget;if (this.isValid(inputElement.value)) {inputElement.oldValue = inputElement.value;inputElement.oldSelectionStart = inputElement.selectionStart;inputElement.oldSelectionEnd = inputElement.selectionEnd;} else if (inputElement.hasOwnProperty("oldValue")) {inputElement.value = inputElement.oldValue;inputElement.setSelectionRange(inputElement.oldSelectionStart, inputElement.oldSelectionEnd);} else {this.value = "";}}}
/*** Generic Input element {@see EventListener} filter** @extends AbstractInputFilter* It needs the {@see AbstractInputFilter~isValid} callback* to determine if the input is valid.*/class InputFilter extends AbstractInputFilter {}
/*** Unsigned Integer Input element {@see EventListener} filter* @extends AbstractInputFilter*/class UIntInputFilter extends AbstractInputFilter {isValid(value) {return /^\d*$/.test(value);}}
/*** Unsigned Float Input element {@see EventListener} filter* @extends AbstractInputFilter*/class UFloatInputFilter extends AbstractInputFilter {isValid(value) {return /^\d*\.?\d*$/.test(value);}}
// Filter with pre-made InputFilters (re-use the filter)new UIntInputFilter(document.getElementById("UInt"));new UFloatInputFilter(document.getElementById("UFloat"));
// Filter with custom callback filter anonymous functionnew InputFilter(document.getElementById("AlNum"), function(value) {return /^\w*$/.test(value);});

<label>Unsigned integer: </label><input id="UInt"><br/><label>Unsigned float: </label><input id="UFloat"><br/><label>AlphaNumeric (no special characters): </label><input id="AlNum">

小开

输入类型=“tel”在移动设备上运行良好，因此您希望保留它。

只需使用以下代码（JQuery）：

$("input[type=tel]").keydown(function (event) {return (event.which >= 48 && event.which <= 57) || //0 TO 9event.which === 8 || event.which == 46; //BACKSPACE/DELETE});

您的输入将是：

<input type="tel" />

您可以向输入字段id添加任何您喜欢的内容，并且不需要绑定任何其他侦听器。

小开

使用此正则表达式/\D*/g

const phoneHandler = (event: React.ChangeEvent<HTMLInputElement>) =>{setPhone(event.target.value.replaceAll(/\D*/g, ''));};

小开

对于ReactJS：

<inputonKeyPress={(event) => {if (!/[0-9]/.test(event.key)) {event.preventDefault();}}}/>

小开

在任何击键上执行此函数，它将不允许除加号、连字符和括号之外的任何内容。

假设例如：+234-（123）1231231将工作没有字母

将(/^[0-9+()-]*$/.test(char))替换为(/^[0-9]*$/.test(char))，以便在击键时仅允许数字。

isNumber(e) {let char = String.fromCharCode(e.keyCode);if (/^[0-9+()-]*$/.test(char)) return true;else e.preventDefault();},

小开

这是我的单线解决方案！

$('#input-field').keypress(e => !String.fromCharCode(e.which).match(/\D/g));

超文本标记语言文本输入只允许数字输入

javascript

Demo

TypeScript

jQuery

HTML5

Demo

这是我的单线解决方案！