Javascript 将文本字段限制为仅数字的最佳方法？

我使用下面的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这样的命令的问题。这就是我在这里提问的全部目的，所以我回到了使用我的原始脚本。哦，好吧。

这是我另一次为数字制作的东西，它也将允许所有格式化程序

jQuery

---

新的JSFIDLE:

只要在按下键或文本框失去焦点时使用正则表达式就可以去掉任何非数字字符

var numInput;
window.onload = function () {   
    numInput = document.getElementById('numonly');
    numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
    {
        numInput.value = numInput.value.replace(/[^0-9]+/,"");
    }
}

试验
功能检查输入（ob）{
var invalidChars=/[^0-9]/gi
if（无效字符测试（观察值））{
ob.value=ob.value.replace（invalidChars，“”）；
}
}

包含有关键入字符信息的唯一事件是

按键

。从

keydown

或

keydup

事件的

keyCode

属性推断出的任何与字符相关的内容都是不可靠的，并且取决于特定的键盘映射。通过使用从

按键

事件中获得的字符，以下命令将阻止非数字键盘输入所有主要浏览器。它不会阻止用户在中粘贴或拖动非数字文本

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;
        }
    }
};

---

值得指出的是，无论您通过前端（Javascript、HTML等）如何严格地控制它，您仍然需要在服务器上对其进行验证，因为没有什么可以阻止用户关闭Javascript，甚至故意向您的表单中发布垃圾邮件来试图攻击您

---

我的建议是：使用HTML5标记，以便支持它的浏览器能够使用它。还可以使用前面建议的JQuery选项（初始解决方案可能有缺陷，但注释似乎已经解决了这个问题）。然后还要进行服务器端验证。

以下代码是我广泛使用的代码。我在论坛中找到了脚本，但修改并扩展了它以满足我的需要：

<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>

//限制文本字段中的用户输入
//根据需要在此处创建任意多个正则表达式：
var digitsOnly=/[1234567890]/g；
var integerOnly=/[0-9\.]/g；
var alphaOnly=/[A-Za-z]/g；
var usernameOnly=/[0-9A-Za-z\.\u-]/g；
功能限制输入（myfield，e，restrictionType，checkdot）{
如果（！e）var e=window.event
如果（e.keyCode）代码=e.keyCode；
否则，如果（e.which）代码=e.which；
var character=String.fromCharCode（代码）；
//如果用户按esc键…将焦点从字段中移除。。。
如果（code==27）{this.blur（）；返回false；}
//如果用户按下其他键，则忽略
//奇怪，因为代码：39是向下键和“键…”。。。
//德尔也等于。
如果（！e.ctrlKey&&code！=9&&code！=8&&code！=36&&code！=37&&code！=38&&&code！=39 | |（code==39&&character==“”）&&code！=40）{
if（字符匹配（限制类型））{
如果（检查点=“检查点”）{
return！isNaN（myfield.value.toString（）+字符）；
}否则{
返回true；
}
}否则{
返回false；
}
}
}

不同的使用方法如下：

<!-- 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);">

---

您还需要退格和删除关键点；）

这也将启用numpad输入

.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;                                          
}); 

.keydown（函数（事件）{
if（event.keyCode==8 | | event.keyCode==46）
返回true；
如果（event.keyCode>=96&&event.keyCode可能您正在使用引导。如果是这样，这就足够了：



我用这个：

    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();
        }
    });

oEl.按键（功能（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检查。由于使用诸如strg+tab之类的组合时不会触发firefoxs按键事件，但其他浏览器会触发，因此key.match方法仍然会为后者增加一点价值，因为它启用了这些组合。
这是我针对这种情况的插件:

 (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 );

为了阻止除数字以外的任何内容输入到文本字段，但仍允许其他按钮（如删除、移位、制表符等）工作，请查看；从65到222的任何内容都可以被阻止

使用Jquery和Javascript，看起来像：

$('#textFieldId').keydown(function(event) {
    if ( event.keyCode > 64 ) {
        event.preventDefault();
    }
});

无论是否使用Jquery，Javascript中的关键代码都是相同的。
我目前有一个数字输入解决方案，需要在不同的浏览器中测试，但似乎可以工作

支持逗号和句点分隔符（捷克语本机为逗号）、空格和numpad/键盘数字输入。允许Ctrl+C Ctrl+A或Ctrl+X、箭头导航和删除块Ctrl+V。通过模糊输入对escape键作出反应

看我的咖啡剧本：

(($) ->
  $.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

    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();
        }
    });

 (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();

$('#textFieldId').keydown(function(event) {
    if ( event.keyCode > 64 ) {
        event.preventDefault();
    }
});

(($) ->
  $.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

$('.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);
});

 $("element").numeric({ decimal: false, negative: false });

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;
    };

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;
}

<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />

$('#someID').keypress(function(e) { 
    var k = e.which;
    if (k <= 48 || k >= 58) {e.preventDefault()};
});

// 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);
});

function keypresshandler(event)
{
     var charCode = event.keyCode;

     //You condition
     if (charCode == 58 ){

        event.preventDefault();

        return false;
     }        
} 

// 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")));

  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,"");
  }

<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>

<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>

<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"> 

 onInputChange(event: any, inpPattern:string): void {   
        var input = event.key; 
        if(input.match(inpPattern)==null){
         event.preventDefault();
        }
      }