我正在使用以下Javascript将我网站上的文本字段限制为仅接受数字输入，而不接受其他字母或字符。问题是，它真的拒绝所有其他键输入，如 ctrl - A 来选择文本，甚至任何其他浏览器函数，如 ctrl - 选择文本框时， T 或 ctrl - W 。有没有人知道一个更好的脚本只允许数字输入，但不能阻止正常命令（没有直接输入到字段中）？谢谢 这是我现在使用的代码：
function numbersonly(e, decimal)
{
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27))
return true;
else if ((("0123456789").indexOf(keychar) > -1))
return true;
else if (decimal && (keychar == "."))
return true;
else
return false;
}
编辑：所提供的解决方案都没有解决我在选择文本框时允许 ctrl - A 等命令的问题。这就是我在这里提出的要点，所以我又回到了使用我的原始剧本。哦，好吧。
答案 0 :(得分：35)
这是我再次为数字做的事情，它也允许所有的格式化程序。
$('input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
作为一个注释，为了粘贴/上下文菜单和不支持粘贴事件的浏览器，您还需要在提交/服务器端进行过滤。
我看到你在“接受”的答案中蹦蹦跳跳，所以我会清楚一些事情。你可以真正使用这里列出的任何方法，它们都有效。我个人所做的是使用我的实时客户端过滤，然后在提交和服务器端使用其他人建议的RegEx。但是，没有客户端本身将100％有效，因为没有什么能阻止我放置document.getElementById('theInput').value = 'Hey, letters.';
在控制台中并绕过任何客户端验证（轮询除外，但我也可以从控制台取消setInterval）。使用您喜欢的客户端解决方案，但也要确保在提交和服务器端实现某些功能。
好的，根据评论，我必须调整两件我没想过的事情。首先，按键而不是已更新的keydown，但IE中缺少indexOf（严重的是Microsoft！？）也打破了上面的例子。这是另一种选择
$('input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!($.inArray(k,a)>=0))
e.preventDefault();
});
新jsfiddle：http://jsfiddle.net/umNuB/
答案 1 :(得分：15)
.keypress(function(e)
{
var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];
if (!($.inArray(e.which, key_codes) >= 0)) {
e.preventDefault();
}
});
您也需要退格键和删除键;）
答案 2 :(得分：14)
适用于IE，Chrome和Firefox：
<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />
答案 3 :(得分：11)
<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
var invalidChars = /[^0-9]/gi
if(invalidChars.test(ob.value)) {
ob.value = ob.value.replace(invalidChars,"");
}
}
</script>
</head>
<body>
<input type="text" onkeyup="checkInput(this)"/>
</body>
</html>
答案 4 :(得分：4)
只要按下某个键或文本框失去焦点，只需使用正则表达式去除任何非数字字符。
var numInput;
window.onload = function () {
numInput = document.getElementById('numonly');
numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
{
numInput.value = numInput.value.replace(/[^0-9]+/,"");
}
}
答案 5 :(得分：4)
包含有关输入字符的信息的唯一事件是keypress。您可能从keyCode或keydown事件的keyup属性推断出与字符相关的任何内容都是不可靠的，并且取决于特定的键盘映射。以下内容将通过使用从keypress事件获得的字符来阻止非数字键盘输入所有主流浏览器。它不会阻止用户粘贴或拖动非数字文本。
var input = document.getElementById("your_input");
input.onkeypress = function(evt) {
evt = evt || window.event;
if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) {
var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
if (charCode && !/\d/.test(String.fromCharCode(charCode))) {
return false;
}
}
};
答案 6 :(得分：4)
我用这个：
oEl.keypress(function(ev)
{
var sKey = String.fromCharCode(ev.which);
if (!sKey.match(/[0-9]/) || !sKey === "")
ev.preventDefault();
});
优点是，仍然允许每个不提供字段输入的键，因此您不必担心每个特殊键。甚至像CTRL + R这样的组合仍然有用。
修改 由于这在Firefox中不起作用，我不得不稍微修改一下这个功能：
oEl.keypress(function(ev)
{
var iKeyCode = ev.which || ev.keyCode;
var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46];
var sKey = String.fromCharCode(iKeyCode);
if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) {
ev.preventDefault();
}
});
<强>解释 所有浏览器都以不同方式处理jquerys按键事件。为了使它在FF中工作，添加了$ .inArray检查。由于firefoxs keypress-event在使用strg + tab之类的组合时没有触发，但是其他组合使用，key.match方法仍然为后者增加了一点价值，因为它启用了这些组合。
答案 7 :(得分：4)
答案 8 :(得分：3)
添加<script type="text/javascript" src="jquery.numeric.js"></script>，然后使用
$("element").numeric({ decimal: false, negative: false });
答案 9 :(得分：3)
以下代码是我广泛使用的代码。我在一个论坛中找到了该脚本，但修改并扩展了它以满足我的需求：
<script type="text/javascript">
// Restrict user input in a text field
// create as many regular expressions here as you need:
var digitsOnly = /[1234567890]/g;
var integerOnly = /[0-9\.]/g;
var alphaOnly = /[A-Za-z]/g;
var usernameOnly = /[0-9A-Za-z\._-]/g;
function restrictInput(myfield, e, restrictionType, checkdot){
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
// if user pressed esc... remove focus from field...
if (code==27) { this.blur(); return false; }
// ignore if the user presses other keys
// strange because code: 39 is the down key AND ' key...
// and DEL also equals .
if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
if (character.match(restrictionType)) {
if(checkdot == "checkdot"){
return !isNaN(myfield.value.toString() + character);
} else {
return true;
}
} else {
return false;
}
}
}
</script>
不同的使用方法是：
<!-- To accept only alphabets -->
<input type="text" onkeypress="return restrictInput(this, event, alphaOnly);">
<!-- To accept only numbers without dot -->
<input type="text" onkeypress="return restrictInput(this, event, digitsOnly);">
<!-- To accept only numbers and dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly);">
<!-- To accept only numbers and only one dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');">
<!-- To accept only characters for a username field -->
<input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">
答案 10 :(得分：2)
更短的方式，易于理解：
$('#someID').keypress(function(e) {
var k = e.which;
if (k <= 48 || k >= 58) {e.preventDefault()};
});
答案 11 :(得分：2)
这是罗伯特答案的变体，允许输入一个小数点。如果已输入小数点，则只接受数字作为输入。
JSFiddle - decimal number input
// Allow only decimal number input
$('#decimalInput').keypress(function (e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
// allow a max of 1 decimal point to be entered
if (this.value.indexOf(".") === -1) {
a.push(46);
}
if (!(a.indexOf(k) >= 0)) e.preventDefault();
$('span').text('KeyCode: ' + k);
});
答案 12 :(得分：2)
我知道已有很多答案，但为了简单，我想添加另一个简单且自我解释我们不必记住密钥代码，它也适用于所有浏览器。
document.getElementById('myinput').onkeydown = function(e)
{
console.log(e.key);
//console.log(e.target.value);
switch (e.key)
{
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case "Backspace":
return true;
break;
case ".":
if (e.target.value.indexOf(".") == -1)
{
return true;
}
else
{
return false;
}
break;
default:
return false;
}
}<input type="text" placeholder="Enter Value" id="myinput" />
答案 13 :(得分：1)
这也将启用小键盘输入。
.keydown(function(event){
if(event.keyCode == 8 || event.keyCode == 46)
return true;
if(event.keyCode >= 96 && event.keyCode <= 105)
return true;
if(isNaN(parseInt(String.fromCharCode(event.keyCode),10)))
return false;
});
答案 14 :(得分：1)
为了阻止任何数字输入到文本字段但仍然允许其他按钮工作（例如删除，移位，制表符等），请查看reference of the Javascript key codes;任何从65开始（到222）的东西都可以被阻止。
使用Jquery和Javascript，它们看起来像：
$('#textFieldId').keydown(function(event) {
if ( event.keyCode > 64 ) {
event.preventDefault();
}
});
无论是否使用Jquery，密钥代码在Javascript中都是相同的。
答案 15 :(得分：1)
所有答案均已过时，冗长，并且会使您的用户感到烦恼。他们中的大多数甚至都不会过滤或允许粘贴内容。
除了过滤输入内容外，在提交表单之前进行一些验证，然后再提交服务器端。
HTML包含以下验证：
mongodb://localhost/temp-test1完成。这也可以在手机上启用数字键盘。
答案 16 :(得分：1)
我的职能：
$('.input_integer_only').on('input', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
$('.input_float_only').on('input', function(e) {
var $var = $(this).val().replace(/[^0-9\.]/g, '');
var $aVar = $var.split('.');
if($aVar.length > 2) {
$var = $aVar[0] + '.' + $aVar[1];
}
$(this).val($var);
});
答案 17 :(得分：1)
这是我的解决方案：以下工作组合。
var checkInput = function(e) {
if (!e) {
e = window.event;
}
var code = e.keyCode || e.which;
if (!e.ctrlKey) {
//46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46)
return true;
//35..39 - home, end, left, right
if (code >= 35 && code <= 39)
return true;
//numpad numbers
if (code >= 96 && code <= 105)
return true;
//keyboard numbers
if (isNaN(parseInt(String.fromCharCode(code), 10))) {
e.preventDefault();
return false;
}
}
return true;
};
答案 18 :(得分：1)
值得指出的是，无论你通过前端（Javascript，HTML等）如何设法控制它，你仍然需要在服务器上验证它，因为没有什么可以阻止用户关闭javascript ，甚至故意将垃圾邮寄到你的表单中以试图破解你。
我的建议：使用HTML5标记，以便支持它的浏览器将使用它。还可以使用之前建议的JQuery选项（初始解决方案可能存在缺陷，但似乎评论已经完成了）。然后进行服务器端验证。
答案 19 :(得分：1)
我在尝试自己解决这个问题时遇到了你的问题。这是我提出的解决方案。
// Prevent user from entering non-numeric characters in number boxes.
(function (inputs) {
var input;
var f = function (e) {
var unicodeRe = /U\+(\d+)/;
// Chrome doesn't support the standard key property, so use keyIdentifier instead.
// Instead of the actual character that "key" returns, keyIdentifier returns
// A string such as "U+004F" representing the unicode character.
// For special characters (e.g., "Shift", a string containing the name of the key is returned.)
var ch = e.key || e.keyIdentifier;
var match = ch.match(unicodeRe);
// keyIdentifier returns a unicode. Convert to string.
if (match) {
ch = String.fromCharCode(Number.parseInt(match[1], 16));
}
console.log(ch);
if (ch.length === 1 && /[^0-9]/.test(ch)) {
if (!/[\b]/.test(ch)) { // Don't prevent backspace.
e.preventDefault();
}
}
};
for (var i = 0, l = inputs.length; i < l; i += 1) {
input = inputs[i];
input.onkeydown = f;
}
}(document.querySelectorAll("input[type=number],#routeFilterBox")));
编辑：我发现我的解决方案不允许用户通过Chrome中的小键盘输入数字。 0-9键盘键似乎正在返回字符＆＃34;`＆＃34;对于0和A-I表示其余的数字键。
答案 20 :(得分：0)
我在Angular中使用以下字符来限制字符
HTML格式
仅用于数字
<input
type="text"
id="score"
(keypress) ="onInputChange($event,'[0-9]')"
maxlength="3"
class="form-control">
仅适用于字母
<input
type="text"
id="state"
(keypress) ="onInputChange($event,'[a-zA-Z]')"
maxlength="3"
class="form-control">
在TypeScript中
onInputChange(event: any, inpPattern:string): void {
var input = event.key;
if(input.match(inpPattern)==null){
event.preventDefault();
}
}
答案 21 :(得分：0)
此JavaScript函数将用于限制字母和 文本框中的特殊字符，仅数字，删除，箭头键和 允许退格。 JavaScript代码段-允许数字 在文本框中，限制字母和特殊字符
在IE和Chrome中进行了测试。
JavaScript函数
<script type="text/javascript">
/*code: 48-57 Numbers
8 - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var x=e.which||e.keycode;
if((x>=48 && x<=57) || x==8 ||
(x>=35 && x<=40)|| x==46)
return true;
else
return false;
}
</script>
带有JavaScript的HTML源代码
<html>
<head>
<title>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</title>
<script type="text/javascript">
/*code: 48-57 Numbers
8 - Backspace,
35 - home key, 36 - End key
37-40: Arrow keys, 46 - Delete key*/
function restrictAlphabets(e){
var x=e.which||e.keycode;
if((x>=48 && x<=57) || x==8 ||
(x>=35 && x<=40)|| x==46)
return true;
else
return false;
}
</script>
</head>
<body style="text-align: center;">
<h1>JavaScript - Allow only numbers in TextBox (Restrict Alphabets and Special Characters).</h1>
<big>Enter numbers only: </big>
<input type="text" onkeypress='return restrictAlphabets(event)'/>
</body>
</html>
答案 22 :(得分：0)
Javascript通常在浏览器客户端使用，以执行简单的任务，否则需要完整回发到服务器。许多简单任务涉及处理在网页上输入表单元素的文本或字符，并且通常需要知道与字符相关联的javascript键代码。这是一个参考。
按下面文本框中的某个键，查看相应的Javascript密钥代码。
function restrictCharacters(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (((charCode >= '48') && (charCode <= '57')) || (charCode == '44')) {
return true;
}
else {
return false;
}
}Enter Text:
<input type="text" id="number" onkeypress="return restrictCharacters(event);" />
答案 23 :(得分：0)
你可以这样做只接受文字框中的数字，
function onChange(event){
var ckeckChars = /[^0-9]/gi;
if(checkChars.test(event.target.value)) {
event.target.value = event.target.value.replace(ckeckChars,"");
}
答案 24 :(得分：0)
document.getElementById('myinput').onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8
|| e.keyCode == 9)) {
return false;
}
}
答案 25 :(得分：0)
您可以通过引入keypress处理函数来处理html上的事件
function keypresshandler(event)
{
var charCode = event.keyCode;
//You condition
if (charCode == 58 ){
event.preventDefault();
return false;
}
}
答案 26 :(得分：0)
您可以进行更改以接受Ctrl键的键码：17,18,19,20。 然后你的代码就像：
function numbersonly(e, decimal) {
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) || (key==17) || (key==18) || (key==19) || (key==20))
return true;
else if ((("0123456789").indexOf(keychar) > -1))
return true;
else if (decimal && (keychar == "."))
return true;
else
return false;
}
答案 27 :(得分：0)
我目前的数字输入解决方案，需要在不同的浏览器中测试，但似乎有效
支持逗号和句点分隔符（捷克语为逗号），空格和小键盘/键盘数字输入。允许Ctrl + C Ctrl + A或Ctrl + X，箭头导航并删除Ctrl + V块。通过模糊输入对退出键进行反应。
观看我的咖啡脚本：
(($) ->
$.fn.onlyNumbers = ->
@each ->
$(@).keydown (e) ->
# get code of key
code = if e.keyCode then e.keyCode else e.which
return $(@).blur() if code is 27 # blur on escape
return if code in [46, 8, 9, 13] # 46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
return if (e.ctrlKey or e.metaKey) and code in [65, 67, 88] # ctrl|command + [a, c, x]
return if code in [96..105] # numpad numbers
return if code in [48..57] # numbers on keyboard
return if code in [35..39] # 35..39 - home, end, left, right
return if code in [188, 190, 32] # comma, period, space
return if code in [44] # comma, period,
e.returnValue = false # IE hate you
e.preventDefault();
$(@).keypress (e) ->
code = if e.keyCode then e.keyCode else e.which
return if code in [44, 46, 32] # comma, period, space
return if code in [48..57] # numbers on keyboard
e.returnValue = false # IE hate you
e.preventDefault();
) jQuery
答案 28 :(得分：0)
这是我的插件：
(function( $ ) {
$.fn.numbers = function(options) {
$(this).keypress(function(evt){
var setting = $.extend( {
'digits' : 8
}, options);
if($(this).val().length > (setting.digits - 1) && evt.which != 8){
evt.preventDefault();
}
else{
if(evt.which < 48 || evt.which > 57){
if(evt.keyCode != 8){
evt.preventDefault();
}
}
}
});
};
})( jQuery );
使用：
$('#limin').numbers({digits:3});
$('#limax').numbers();