javascript(jquery）数字输入:keyCode for'3'和'#'都是一样

javascript (jquery) numeric input: keyCode for '3' and '#' are the same

本文关键字：#39# 一样 for keyCode jquery javascript 数字输入      更新时间：2023-09-26

我需要设置一个<input type="text" />，以便它只接受数字字符、退格、删除、输入、制表符和箭头。

有很多例子，我从类似的东西开始：

function isNumericKeyCode (keyCode){
    return ( (keyCode >= 48 && keyCode <= 57) //standard keyboard
           ||(keyCode >= 96 && keyCode <= 105)) //Numpad
}
$('#myTextBox').keydown(function(e){
         var handled = true;
         var keyCode = e.keyCode;
         switch(keyCode){
            //Enter and arrows
            case 13:
            case 37:
            case 38:
            case 39:
            case 40:
               doSomethingSpecialsWithThesesKeys();
               break;
            default:
               handled = false;
               break;
         }
         if (  !handled
            && keyCode !== 8 //backspace
            && keyCode !== 9 //tab
            && keyCode !== 46 //del
            && !isNumericKeyCode(keyCode)){
            handled = true;
         }
         return handled;
});

所有这些都很完美，直到我按下"#"键。在我的法语-加拿大键盘中，"#"有自己的键（不包含移位），返回keyCode51，与数字"3"相同。

我认为在美国键盘中，"#"是通过按下shift+3获得的，这可能就是为什么它们有相同的键代码。

现在我意识到我也必须处理shift和alt键，但那是另一回事了。

它与jquery keypress事件的工作方式不同，后者提供charCode属性，但我一开始没有使用它，因为文档中说：

由于按键事件不在任何官方规范中使用它时遇到的实际行为可能因浏览器而异，浏览器版本和平台。

此外，在这种情况下，我需要一个变通方法来处理选项卡、箭头和其他特殊键，因为它们不提供charCode。

所以问题是：有没有一种方法可以使用keydown事件只允许一些特定的字符？而且，以一种独立于键盘布局的方式工作

作为一个附带问题：哪些浏览器可能会对按键事件产生问题？我的意思是，目前我真的不在乎我的网站是否不支持IE6。我针对的是最近的浏览器。

编辑

正如有人在评论中指出的那样，这种方法不允许用户在输入中"ctrl+v"一个数字。在我的特殊情况下，这实际上不是能够粘贴数字的要求。但这在我的脑海中弹出了一些东西，用户仍然可以右键clic>复制输入中的一些文本，在这种情况下，可以是任何文本。我想得越多，就越觉得我需要keydown事件来处理选项卡和箭头，并需要另一个事件来处理输入本身。

第2版

这里有很多漂亮的答案，但该奖项授予了使用input和propertychange活动的mrtsherman。我将使用此答案的组合进行数字验证，再加上像以前一样的keyCode事件，以特殊使用箭头、制表符和回车键。

这样的东西怎么样。这应该包括剪切/粘贴以及人民币内容。我们监视文本框中内容的任何更改。然后，我们使用正则表达式根据白名单过滤掉字符。这不会处理非字符键，但我认为这是可以的。

'd标志表示只能接受数字。

http://jsfiddle.net/UXeva/1

$('#myTextBox').bind('input propertychange', function() {
    var text = $(this).val();
    if (isNaN(text)) {
       $(this).val(text.replace(/[^'d]/gi, ''));
    }
});

这里有两件事。FireFox的输入和其他浏览器的属性更改。

如果旧的浏览器不是问题，那么数字输入类型应该涵盖这一点。

<input type="number" />

如果没有，您可以使用isNaN javascript函数

$("#number1").on('keyup', function() {
    var myval = $(this).val();
    if (isNaN(myval)) {
        alert('numbers only!');
    }
});

就我个人而言，我会进行一些正则表达式过滤，检查值是否已更改，这将允许任何不更改值的字符，如制表符、回车符和箭头。使用正则表达式，您还可以添加或删除任何字符，或者您可以仅将''d用于数字，或者如下所示，[0-9]。你的确切需求是什么？

var P;
$("#number2").on('keyup', function() {
    var V = $(this).val();
    if (V != P) {
        $(this).val(V.replace(/[^0-9]/g,''));
    }
    P=V;
});

它们也可以组合成这样的东西：

$("#number3").on('keyup', function() {
    var V = $(this).val();
    if (isNaN(V)) {
        $(this).val(V.replace(/[^0-9]/g,''));
    }
});

这里有一个FIDDLE来测试它们！

为什么不这样做呢？它使用keyup()事件和isNaN()的组合。无论用户是用键盘打字还是粘贴数字，它都能工作。

它的工作方式是，一旦文本发生变化，它就会检查该值是否为数字。如果没有，它将修剪输入，直到它是一个数字。因此，如果输入25s或25ss，则会留下25。

这也适用于ctrl+v粘贴。它不适用于右键粘贴，因此，我禁用了仅在文本框上右键单击。

实时演示

Jquery

$(document).ready(function(){
    $('#number').keyup(function(){    
        var input = this.value;
        while (isNaN(input))
        {
            input = input.substring(0,input.length-1);
            $('#number').val(input);             
        }
    });
    $('#number').bind("contextmenu",function(e){
        return false;
    });
});
jQuery还为事件对象提供了一个shiftkey布尔值： 
$('#myTextBox').keydown(function(e){
  if(e.keyCode === 51 && !e.shiftKey){
     // '3' key pressed while shift was **not** held down (not '#')
  }
});

编辑我重读了您的问题，并更改了上面!shiftkey 的代码

相关文章：