我使用以下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等命令的问题。这就是我在这里提出的要点，所以我又回到了使用我的原始剧本。那好吧。
这是我再次为数字做的事情，它也允许所有的格式化程序。
$('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/
添加<script type="text/javascript" src="jquery.numeric.js"></script>然后使用
$("element").numeric({ decimal: false, negative: false });
更短的方式，易于理解：
$('#someID').keypress(function(e) {
var k = e.which;
if (k <= 48 || k >= 58) {e.preventDefault()};
});
这是罗伯特答案的变体，允许输入一个小数点。如果已输入小数点，则仅接受数字作为输入。
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);
});
我知道已经有很多答案，但为了简单起见，我想补充一个简单而自我解释的答案，其中我们不必记住密钥码，它也适用于所有浏览器。
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" />值得指出的是，无论你通过前端（Javascript，HTML等）如何设法控制它，你仍然需要在服务器上验证它，因为没有什么可以阻止用户关闭javascript，甚至故意将垃圾邮寄到您的表单中以试图破解您。
我的建议：使用HTML5标记，以便支持它的浏览器将使用它。还可以使用之前建议的JQuery选项（初始解决方案可能存在缺陷，但似乎评论已经完成了）。然后进行服务器端验证。
这也将启用小键盘输入。
.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;
});
为了阻止任何数字输入到文本字段但仍允许其他按钮工作（例如删除，移位，制表符等），请查看reference of the Javascript key codes;任何从65开始（到222）的东西都可以被阻止。
使用Jquery和Javascript，看起来像：
$('#textFieldId').keydown(function(event) {
if ( event.keyCode > 64 ) {
event.preventDefault();
}
});
无论是否使用Jquery，密钥代码在Javascript中都是相同的。
这是我的解决方案：下面的工作组合。
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;
};
我试图自己解决这个问题时遇到了你的问题。这是我提出的解决方案。
// 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键盘键似乎返回字符“`”表示0和A-I表示其余数字键。
所有答案都已过时，冗长，会给您的用户带来烦恼。他们中的大多数甚至不过滤或允许粘贴的内容。
而不是过滤输入，在提交表单之前进行一些验证，然后在服务器端进行。
HTML验证包括：
<input type="number" pattern="[0-9]+">
完成。这也可以在移动设备上启用数字键盘。
.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();
}
});
你也需要Backspace和Delete键;）
这是我的插件：
(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();
我目前的数字输入解决方案，需要在不同的浏览器中测试，但似乎工作
支持逗号和句点分隔符（捷克语为逗号），空格和小键盘/键盘数字输入。允许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
你可以在这里编译Javascript http://goo.gl/SbyhXN
我的职责：
$('.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);
});
您可以进行更改以接受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;
}
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;
}
}
您可以这样做只接受文本框中的数字，
function onChange(event){
var ckeckChars = /[^0-9]/gi;
if(checkChars.test(event.target.value)) {
event.target.value = event.target.value.replace(ckeckChars,"");
}
此JavaScript函数将用于限制文本框中的字母和特殊字符，只允许使用数字，删除，箭头键和退格键。 JavaScript代码段 - 允许TextBox中的数字，限制字母和特殊字符
在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>
您可以通过引入keypress处理函数来处理html上的事件
function keypresshandler(event)
{
var charCode = event.keyCode;
//You condition
if (charCode == 58 ){
event.preventDefault();
return false;
}
}
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);" />这适用于IE，Chrome和Firefox：
<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />
<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>
只要按下一个键或文本框失去焦点，只需使用正则表达式去掉任何非数字字符。
var numInput;
window.onload = function () {
numInput = document.getElementById('numonly');
numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
{
numInput.value = numInput.value.replace(/[^0-9]+/,"");
}
}
包含有关所输入字符的信息的唯一事件是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;
}
}
};
我用这个：
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 keypress事件。为了使它在FF中工作，添加了$ .inArray检查。由于firefoxs keypress-event在使用strg + tab之类的组合时没有触发，但是其他组合使用，key.match方法仍然为后者增加了一点价值，因为它启用了这些组合。
以下代码是我广泛使用的代码。我在论坛中找到了该脚本，但修改并扩展了它以满足我的需求：
<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);">