是否有一种快速方法可以将HTML文本输入（<input type=text />）设置为仅允许数字键击（加上'。'）？
答案 0 :(得分：1000)
注意：这是一个更新的答案。下面的评论是指使用密钥代码搞乱的旧版本。
以下脚本中的setInputFilter功能允许您在文本<input>上使用任何类型的输入过滤器，包括各种数字过滤器。这将正确处理复制+粘贴，拖放，键盘快捷键，上下文菜单操作，不可键入的键，光标位置，所有键盘布局和all browsers since IE 9。 请注意，您仍必须进行服务器端验证！
亲自尝试on JSFiddle。
// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
textbox.addEventListener(event, function() {
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);
}
});
});
}
用法：
// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value);
});
您可能想要使用的一些输入过滤器：
/^-?\d*$/.test(value) /^\d*$/.test(value) /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500) .和,作为小数点分隔符）：/^-?\d*[.,]?\d*$/.test(value) /^-?\d*[.,]?\d{0,2}$/.test(value) /^[0-9a-f]*$/i.test(value) 还有一个jQuery版本。请参阅this answer或亲自尝试on JSFiddle。
HTML 5有<input type="number">的原生解决方案（请参阅specification），但请注意浏览器支持各不相同：
step，min和max属性。e和E。另请参阅this question。亲自尝试on w3schools.com。
如果你想做一些其他的验证点，这可能很方便：
答案 1 :(得分：257)
使用此DOM
<input type='text' onkeypress='validate(event)' />
这个脚本
function validate(evt) {
var theEvent = evt || window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
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();
}
}
答案 2 :(得分：124)
我一直在努力寻找一个很好的答案，我们迫切需要<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) )">
答案 3 :(得分：54)
还有一个例子，对我很有用：
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);
});
和HTML：
<input type="input" id="edit1" value="0" size="5" maxlength="5" />
答案 4 :(得分：50)
这是一个简单的，只允许一个十进制，但不多：
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
答案 5 :(得分：46)
HTML5有<input type=number>，这听起来很适合你。目前，只有Opera本机支持它，但a project有JavaScript实现。
答案 6 :(得分：42)
这里的大多数答案都有使用键事件的弱点。
许多答案会限制您使用键盘宏进行文本选择，复制+粘贴以及更多不需要的行为的能力，其他答案似乎依赖于特定的jQuery插件，这会使用机器枪来杀死苍蝇。
这个简单的解决方案似乎对我来说最适合跨平台，无论输入机制如何（按键，复制+粘贴，右键复制+粘贴，语音到文本等）。所有文本选择键盘宏仍然可以工作，它甚至会限制通过脚本设置非数字值的能力。
function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
答案 7 :(得分：40)
我选择使用这里提到的两个答案的组合，即
<input type="number" />
和
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
<input type="text" onkeypress="return isNumberKey(event);">
答案 8 :(得分：33)
HTML5支持正则表达式，因此您可以使用它：
<input id="numbersOnly" pattern="[0-9.]+" type="text">
警告：某些浏览器尚不支持此功能。
答案 9 :(得分：17)
的JavaScript
function validateNumber(evt) {
var e = evt || window.event;
var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
// numbers
key >= 48 && key <= 57 ||
// Numeric keypad
key >= 96 && key <= 105 ||
// Backspace and Tab and Enter
key == 8 || key == 9 || key == 13 ||
// Home and End
key == 35 || key == 36 ||
// left and right arrows
key == 37 || key == 39 ||
// Del and Ins
key == 46 || key == 45) {
// input is VALID
}
else {
// input is INVALID
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
另外你可以添加逗号，句号和减号（，.-）
// comma, period and minus, . on keypad
key == 190 || key == 188 || key == 109 || key == 110 ||
HTML
<input type="text" onkeydown="validateNumber(event);"/ >
答案 10 :(得分：15)
2个解决方案：
使用表单验证程序（例如使用jQuery validation plugin）
使用正则表达式在输入字段的onblur（即用户离开字段时）事件期间进行检查：
<script type="text/javascript">
function testField(field) {
var regExpr = new RegExp("^\d*\.?\d*$");
if (!regExpr.test(field.value)) {
// Case of error
field.value = "";
}
}
</script>
<input type="text" ... onblur="testField(this);"/>
答案 11 :(得分：15)
这么简单....
//在JavaScript函数中（可以使用HTML或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位数字）
答案 12 :(得分：13)
请找到下面提到的解决方案。在此用户中，只能输入numeric值，用户也无法在输入中copy，paste，drag和drop。
允许的字符
0,1,2,3,4,5,6,7,8,9
不允许通过活动填写字符和字符
$(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">
如果不起作用，请告诉我。
答案 13 :(得分：13)
更安全的方法是检查输入的值，而不是劫持按键并尝试过滤keyCodes。
这样用户可以自由使用键盘箭头，修改键，退格键，删除键，使用非标准键盘，使用鼠标粘贴，使用拖放文本，甚至使用辅助功能输入。
以下脚本允许正数和负数
1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed
var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;
//enforce that only a float can be inputed
function 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>
编辑：我删除了我的旧答案，因为我认为现在已经过时了。
答案 14 :(得分：12)
您可以使用模式：
<input id="numbers" pattern="[0-9.]+" type="number">
答案 15 :(得分：10)
如果您想在Alpha或数字之间向设备（可能是手机）推荐，可以使用<input type="number">。
答案 16 :(得分：9)
使用jQuery和replace（）而不是查看event.keyCode或event.which的简短实现：
$('input.numeric').live('keyup', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
键入的字母暂时出现的小副作用和CTRL / CMD + A似乎表现得有些奇怪。
答案 17 :(得分：9)
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();
}
}
}
HTML code：
<input type='text' name='price' value='0' onkeypress='validate(event)'/>
完美地工作，因为退格键代码是8并且正则表达式不允许它，所以它是一种绕过错误的简单方法：）
答案 18 :(得分：8)
input type="number"是HTML5属性。
在另一种情况下，这将对您有所帮助：
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
答案 19 :(得分：8)
使用
的jQuery的另一个变种$(".numeric").keypress(function() {
return (/\d/.test(String.fromCharCode(event.which) ))
});
答案 20 :(得分：7)
只需使用 type =“number”现在此属性支持大多数浏览器
<input type="number" maxlength="3" ng-bind="first">
答案 21 :(得分：7)
还有一个例子，可以只在输入字段中添加数字，不能字母
<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');">
答案 22 :(得分：6)
您还可以将输入值（默认情况下视为字符串）与强制为数字的自身进行比较，如：
if(event.target.value == event.target.value * 1) {
// returns true if input value is numeric string
}
但是，您需要将其绑定到类似keyup等事件。
答案 23 :(得分：6)
<input name="amount" type="text" value="Only number in here"/>
<script>
$('input[name=amount]').keyup(function(){
$(this).val($(this).val().replace(/[^\d]/,''));
});
</script>
答案 24 :(得分：5)
这是一项改进的功能：
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();
}
}
答案 25 :(得分：5)
使用此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，因为在onkeypress属性之前检查了onkeydown属性。问题出在Google Chrome浏览器中。
使用“onkeypress”属性，TAB在Google Chrome上使用“preventDefault”无法控制，但是，使用属性“onkeydown”，TAB变得可控！
TAB的ASCII代码=＆gt; 9
第一个脚本的代码少于第二个脚本，但ASCII字符数组必须包含所有键。
第二个脚本比第一个脚本大得多，但是数组不需要所有键。数组每个位置的第一个数字是每个位置的读取次数。对于每个读数，将增加1到下一个。例如：
NCount = 0
48 + NCount = 48
NCount + +
48 + NCount = 49
NCount + +
...
48 + NCount = 57
在数字键只有10（0 - 9）的情况下，如果它们是1百万，那么创建一个包含所有这些键的数组是没有意义的。
ASCII码：
答案 26 :(得分：4)
这是geowa4's solution的扩展版本。支持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 tab
key = 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.target
var 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'));
}
});
});
答案 27 :(得分：4)
最好的方法（允许所有类型的数字 - 真正的负数，实数正数，整数负数，整数正数）是：
$(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();
};
});
答案 28 :(得分：4)
解决此问题的一种简单方法是实现jQuery函数，以使用正则表达式验证文本框中键入的字符，例如：
您的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
});
});<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>
<input type="text" class="integerInput"/>
答案 29 :(得分：4)
我的解决方案可以提供更好的用户体验：
HTML
<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验证，我最终需要2个函数，一个用于普通用户输入（按键），另一个用于复制+粘贴修复（更改），其他组合会给我带来糟糕的用户体验。
我使用更可靠 KeyboardEvent.key而不是现已弃用 KeyboardEvent.charCode
根据您的浏览器支持，您可以考虑使用Array.prototype.includes()而不是命名不佳的Array.prototype.indexOf()（对于true / false结果）
答案 30 :(得分：3)
如果您尝试使用角度，这可能会有所帮助
要获取输入为数字（带小数点），然后
<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">
在更新模型中的值之后，更改事件将触发，因此它也可以与反应式一起使用。
答案 31 :(得分：2)
我可能有另一种（简单的）解决方法......
因为String.fromCharCode（key）在AZERTY键盘上返回奇怪的东西（数字小键盘将代码返回为g代表1，而1代表＆amp;字符..
我已经意识到在输入中捕获keyup的最终值以将其重置为任意值是一个更简单，轻量级的＆amp; bugproof方法（也可以通过一些正则表达式来完成...以保持小数等等...不必过滤其他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>
答案 32 :(得分：2)
如果你可以使用插件，这是我测试过的。除粘贴外，它的效果很好。
以下是演示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>
答案 33 :(得分：2)
使用：
<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);">
如果您想在按键后更新值，可以更改 onChaypress 的 onChange ， onKeyDown 或 onKeyup < / strong>即可。 但事件onKeypress并未在任何浏览器中运行。
答案 34 :(得分：2)
下面的代码也将检查 PASTE 事件
取消注释＆＃34; ruleSetArr_4 ＆＃34;并添加（连接）到＆＃34; ruleSetArr ＆＃34;允许 FLOAT 号码
轻松复制/粘贴功能。用参数中的输入元素调用它
示例：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,delete
ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57], // top keyboard num keys
ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys
ruleSetArr_4 = [17,67,86], // Ctrl & V
//ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values
ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4); // merge arrays of keys
if(ruleSetArr.indexOf() !== "undefined"){ // check if browser supports indexOf() : IE8 and earlier
var retRes = ruleSetArr.indexOf(key);
} else {
var retRes = $.inArray(key,ruleSetArr);
};
if(retRes == -1){ // if returned key not found in array, return false
return false;
} else if(key == 67 || key == 86){ // account for paste events
event.stopPropagation();
};
}).on('paste',function(event){
var $thisObj = $(this),
origVal = $thisObj.val(), // orig value
newVal = event.originalEvent.clipboardData.getData('Text'); // paste clipboard value
if(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">
答案 35 :(得分：2)
为输入字段指定一个类（<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笔画中的特殊字符。
答案 36 :(得分：2)
我使用你可以从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 });
这仅适用于数字，但您可以更改正则表达式以接受“。”。
使用此功能无法输入非数字字符。 将这些输入掩码库用于一般格式化非常有用。
答案 37 :(得分：2)
这是一个我喜欢使用的简单解决方案：
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“isNumeric”函数对其进行测试。这样可以避免测试每个角色的所有单调，也适用于剪切/粘贴场景。
如果你想变得非常可爱，那么你可以创建一个新的HTML输入类型。我们称之为“数字”，以便您可以使用标记：
<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;
HTML并不关心您使用的是什么类型的名称 - 如果它无法识别它，那么默认情况下它将使用文本框，因此您可以执行此操作。你的编辑可能会抱怨，但是，嘿，这是它的问题。毫无疑问，清教徒会惊慌失措，但它很有效，而且到目前为止它对我来说非常强大。
答案 38 :(得分：2)
这是简单的解决方案
将.price-input 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();
}
});
答案 39 :(得分：2)
您可以用以下方法替换Shurok功能：
$(".numeric").keypress(function() {
return (/[0123456789,.]/.test(String.fromCharCode(Event.which) ))
});
答案 40 :(得分：2)
记住区域差异（欧元以与美国人相反的方式使用句号和逗号），加上减号（或用括号括起数字以表示否定的惯例），加上指数符号（我正在达到一个）。
答案 41 :(得分：2)
您可以附加到按键事件，然后根据需要过滤按键，例如：
<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;
else
return false;
}
}
function getKeyEvent(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
keynum = e.keyCode
else if(e.which) // Netscape/Firefox/Opera
keynum = e.which
return keynum;
}
答案 42 :(得分：1)
我看到了一些很棒的答案，但是我喜欢它们尽可能的小和尽可能简单，所以也许有人会从中受益。我会像这样使用javascript Number()和isNaN功能：
if(isNaN(Number(str))) {
// ... Exception it is NOT a number
} else {
// ... Do something you have a number
}
希望这会有所帮助。
答案 43 :(得分：1)
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">答案 44 :(得分：1)
我找不到明确的答案，这不会每次都遍历整个字符串，所以在这里：
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);
}
})
});
没有正则表达式，每次键入时都会遍历最后一个字符，如果它不是数字或句点，则将其切片。
答案 45 :(得分：1)
有一个之前没有人提到过的更简单的解决方案：
inputmode="numeric"
阅读更多：https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/
答案 46 :(得分：1)
这是我的简单解决方案仅适用于 React 用户，我找不到更好的解决方案并自己制作了。 3 个步骤。
首先，创建一个状态。
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, ""));
}
答案 47 :(得分：1)
我一直在寻找阻止输入数字的方法，然后，因为我没有在答案中找到它，这段代码对我来说很好。
我只需要在onkeypress事件中输入它。
如果你只需要阻止输入数字，我相信这样可以正常工作。
onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
答案 48 :(得分：1)
对于那些喜欢单行的人。
string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');
我在输入类型=＆＃34; text＆＃34;上使用此代码，并使用AngularJS在keypress上激活，但是如果愿意则可以使用jQuery。只需将此代码放入一个以某种方式激活按键的功能。
它只允许数字，数字+十进制，数字+十进制+数字。
<强> CODE
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";
：）
答案 49 :(得分：1)
是的，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>
答案 50 :(得分：1)
function digitsOnly(obj) {
obj.value = obj.value.replace(/\D/g, "");
}
并在元素中
<input type="text" onkeyup="digitsOnly(this);" />
答案 51 :(得分：1)
我调整了一些，但是需要做更多的工作才能符合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();
}
}
然后通过以下方式调用：
$('input[name=Price]').keydown(function(myEvent) {
validateNumber(myEvent,true);
});
答案 52 :(得分：1)
jQuery的另一个简单方法：
$('.Numeric').bind('keydown',function(e){
if (e.which < 48 || e.which > 57)
return false;
return true;
})
现在只需将每个输入类设置为Numeric，例如：
<input type="text" id="inp2" name="inp2" class='Numeric' />
答案 53 :(得分：1)
这会立即删除任何不良字符，只允许一个点，短，并允许退格等：
$('.numberInput').keyup(function () {
s=$(this).val();
if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});
答案 54 :(得分：0)
这也适用于波斯和阿拉伯数字：）
setNumericInput: function (event) {
var key = window.event ? event.keyCode : event.which
if (event.keyCode === 8 ||
(key >= 48 && key <= 57) ||
(key >= 1776 && key <= 1785)) {
return true
} else {
event.preventDefault()
}
}
答案 55 :(得分：0)
你可以尝试使用'''onkeydown'''事件，当它不是允许的键之一时取消事件（event.preventDefault或类似的东西）。
答案 56 :(得分：0)
上面的一些答案使用了过时的内容，例如 which 的使用。
要检查按下的键是否为数字，请使用 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()
}
}
答案 57 :(得分：0)
<input type="tel"
onkeypress="return onlyNumberKey(event)">
在脚本标签中
function onlyNumberKey(evt) {
// Only ASCII charactar in that range allowed
var ASCIICode = (evt.which) ? evt.which : evt.keyCode
if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
return false;
return true;
}
答案 58 :(得分：0)
我意识到一个旧职位，但我认为这可以帮助某人。最近我不得不将文本框限制为只有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);
}
希望能帮到某人
答案 59 :(得分：0)
我已完成使用此功能：
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(e.keyCode != 9) return false;"
答案 60 :(得分：0)
当涉及到傻瓜式的用户体验时，应该总是试图保留“用户智能”的参考点。
虽然忽略数字以外的所有内容，但点和连字符似乎是完美的选择，你还应该考虑让它们输入任何内容，当它们完成时，净化输入;如果不是有效号码，则显示错误。无论用户设法做什么，此方法都将确保结果始终有效。如果用户天真地不理解警告和错误消息，按下按钮并看到没有任何反应（如在键码比较中）只会让他/她更加困惑。
此外，对于表单，验证和错误消息显示几乎是必需的。因此，规定可能已存在。这是算法：
在失去焦点或表单提交时，请执行以下操作。
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用于显示警告，则可能会被用户忽略，并可能导致无意的输入提交。抛出错误或正确显示警告可以解决这个问题。
速度。这可能比正则表达式方法在几微秒内更慢。
<强>优点： 假设用户具有阅读和理解的基本知识，
可通过选项进行高度自定义。
跨浏览器工作且独立于语言。
利用表单中已有的功能显示错误和警告。
答案 61 :(得分：0)
准备好验证时，请调用此函数。我在这里使用了一个文本框
在我的HTML中：
<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />
在我的JavaScript代码中：
function check(num){
var onlynumbers = true
for (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
}
}
答案 62 :(得分：0)
这是一个非常简短的解决方案，它不使用已弃用的keyCode或which，不阻止任何非输入键，并且使用纯JavaScript。 （在Chromium 70.0.3533，Firefox 62.0和Edge 42.17134.1.0中进行了测试）
HTML：
<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();
}
}
答案 63 :(得分：0)
正则表达式和匹配函数可以很好地适应这种情况。例如，我使用以下内容验证了作为图形坐标的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();
}
}
答案 64 :(得分：0)
希望我没有在这里用一根丑陋的棍子击败一匹死马，但是我使用它来输入我的网站数量，它只允许从1到99的数字。
试一试： https://jsfiddle.net/83va5sb9/
body{
background-color : azure;
}
.card{
height: 100px;
width: 350px;
border: 1px solid gray;
box-shadow: 1px 1px 3px #888;
border-top: 10px solid green;
min-height: 250px;
padding: 10px;
margin: 10px;
}
img{
border-radius: 50%;
width: 70px;
margin: 10px;
}
答案 65 :(得分：-1)
谢谢你们这真的帮助我了！
我发现完美的数据库非常有用。
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);
}
}
}
然后添加事件处理程序：
onkeyup="numonly(this);"
答案 66 :(得分：-2)
以下功能将检查每个输入字符是否为数字。
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)));
}
答案 67 :(得分：-2)
我个人建议使用http://www.decorplanit.com/plugin/中的autoNumeric插件 - 它支持所有不同的变体，如前缀/后缀处理，货币处理，负值格式，最小值，最大值等。