Html 不允许在 <input type=number /> 中输入字母字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18224064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Don't allow typing alphabetic characters in a <input type=number />
提问by user79307
I need to have a textbox, where, whenever typed inside should ONLY allow numbers [0-9]. I've used type="number"which definitely holds the client side validation but also allows to type other alphabets. I can do it by tracking each keydown and matching with regex but I was wondering if there is any way I can restrict to type using only html tags and NOT defining any functions in JavaScript to compare in each keydown?
我需要有一个文本框，无论何时在里面输入都应该只允许数字 [0-9]。我使用过type="number"它肯定包含客户端验证，但也允许输入其他字母。我可以通过跟踪每个按键并与正则表达式匹配来做到这一点，但我想知道是否有任何方法可以限制只使用 html 标签而不是在 JavaScript 中定义任何函数来在每个按键中进行比较？
Code not sufficient to do so is:
不足以做到这一点的代码是：
<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">
Any help is appreciated.
任何帮助表示赞赏。
回答by mihai.ciorobea
You can use jquery.numericplugin.
您可以使用 jquery.numeric插件。
See heresimilar question.
看到 这里类似的问题。
$(document).ready(function(){
$(".numeric").numeric();
});
回答by Sandip
Try this
尝试这个
define javascript function
定义javascript函数
function for allowed number with decimal as below
允许带十进制数的函数如下
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
function for allowed only number not decimal is as below
仅允许数字而不是十进制的函数如下
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if ((charCode < 48 || charCode > 57))
return false;
return true;
}
Html
html
<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" onkeypress="return isNumberKey(event)">
回答by mswyss
input type="number" for getting Numeric Keyboard on Mobile Device
input type="number" 用于在移动设备上获取数字键盘
Java-Script
Java脚本
function numbersonly(myfield, e)
{
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// only one decimal point
else if ((keychar == "."))
{
if (myfield.value.indexOf(keychar) > -1)
return false;
}
else
return false;
}
Html
html
<input type="number" onkeypress="return numbersonly(this, event)"/>
回答by user7409534
Try this:-
尝试这个：-
$("#txtAge").keydown(function (e) {
if(e.key=='e' || e.key=='.' || e.key=='-')
return false;
});
回答by Monika Tiruchanur
I notice that the question was posted around 2013. Anyways, now type="number" is restricting alphabets and special characters other that 'e','.' and '+' as 'e' and '.' are considered for exponential numbers like 1.2e+12, '.' is considered for decimal numbers.
我注意到这个问题是在 2013 年左右发布的。无论如何，现在 type="number" 限制了字母和除 'e'、' 之外的特殊字符。和 '+' 作为 'e' 和 '.' 被考虑用于指数数，如 1.2e+12, '.' 考虑十进制数。
回答by ds345
You will have to have your input box inside a form and with a submit button. The form validation happens at the submission of the form. See a demo here: http://jsfiddle.net/ds345/Q4muA/1/
您必须将输入框放在表单中并带有提交按钮。表单验证发生在提交表单时。在此处查看演示：http: //jsfiddle.net/ds345/Q4muA/1/
<form>Number:
<input type="number" name="Number" value="10">
<br>
<input type="submit" value="Submit" />
</form>
回答by Greg Neils
Browsers behave differently. In Chrome the following code:
浏览器的行为不同。在 Chrome 中，以下代码：
<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">
<input type="submit">
will work for you onlyif it is in a form and only after the user clicks the submit button.
只有在表单中并且只有在用户单击提交按钮后才会为您工作。
回答by Akhil Sekharan
If you don't mind using a bit of Javascript, this might help JS-BIN Demo:
如果您不介意使用一点 Javascript，这可能对JS-BIN Demo有所帮助：
<input type="number" onkeyup="if(!this.checkValidity()){this.value='';alert('Please enter a number')};"/>
回答by Ankush Naskar
just add - min="0" max="9" onkeydown="return false;"
只需添加 - min="0" max="9" onkeydown="return false;"
<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" min="0" max="9" onkeydown="return false;">
<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" min="0" max="9" onkeydown="return false;">
