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

【问题标题】：Best way to restrict a text field to numbers only?将文本字段限制为仅数字的最佳方法？
【发布时间】：2021-08-28 22:41:51
【问题描述】：

我正在使用以下 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 这样的命令的问题。这就是我在这里询问的重点，所以我又回到了使用我原来的脚本。哦，好吧。

【问题讨论】：

如果您对使用 HTML 5 感到满意，但实现不完善，表单类型 <input type="number" /> 可以工作。
我希望我可以使用 HTML 5。这是我的第一个想法，它会为我节省很多查找 javascript 的时间：-p 无论如何，谢谢
HTML Text Input allow only Numeric input的可能重复

标签： javascript html textbox numbers textfield

【解决方案1】：

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

jQuery

>

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

试试看

http://jsfiddle.net/zpg8k/

请注意，为了粘贴/上下文菜单和不支持粘贴事件的浏览器，您还需要在提交/服务器端进行过滤。

编辑以详细说明多种方法

我看到您在“已接受”的答案周围蹦蹦跳跳，所以我会澄清一些事情。您可以真正使用此处列出的任何方法，它们都有效。我个人会使用我的实时客户端过滤，然后在提交和服务器端使用其他人建议的 RegEx。但是，没有客户端本身是 100% 有效的，因为没有什么能阻止我将 document.getElementById('theInput').value = 'Hey, letters.'; 在控制台中并绕过任何客户端验证（轮询除外，但我也可以从控制台取消setInterval）。使用您喜欢的任何客户端解决方案，但请确保您在提交和服务器端也实现了一些东西。

编辑 2 - @Tim Down

好的，根据 cmets，我必须调整两件我没有想到的事情。首先，keypress 而不是 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/

【讨论】：

嗯，我不确定这是否适合我。如果您按住键，它似乎仍然允许字母。我想完全阻止字母，所以表单验证错误是最后的手段
数字是格式化程序、退格、移位等等等。当你按下一个键时，它应该在右边显示键码，这样你就可以四处玩耍，看看你想要允许和禁止什么。
不要使用keydown 或keyup 来检查用户输入的字符。您获得的任何成功都是巧合和不可靠的：布局不同的键盘或来自您自己文化之外的键盘将具有不同的键映射，并且您的键码将毫无用处。唯一包含字符信息的事件是keypress。
另一个问题：在 IE 8 及以下版本中，数组没有indexOf 方法。
嗯@Tim Down，充满了让我更讨厌IE的有用花絮，再次调整。

【解决方案2】：

这适用于 IE、Chrome 和 Firefox：

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

【讨论】：

这太棒了，虽然它可以用来解释发生了什么。
检查 NULL 字符然后测试数字正则表达式“/\d/”
在这种情况下我们如何包含负号？
尝试对数字和减号字符集进行测试，如下所示：... || /[\d-]/.test(...

【解决方案3】：

     .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 键；）

【讨论】：

我很困惑，它没有包含在最佳答案中。也许需要编辑？
这是唯一适用于所有平台的解决方案。谢谢你太棒了！
.on('keypress', function (event) { var _element = $(this), keyCode = event.keyCode || event.which, keysAllowed = [44, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8, 9, 13]; if ($.inArray(keyCode, keysAllowed) === -1 && event.ctrlKey === false) { event.preventDefault(); } }); 它还添加选项卡并输入并观察 ctrl 组合。

【解决方案4】：

http://jsfiddle.net/PgHFp/

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

【讨论】：

这也很好用！感谢@fahd，它甚至可以防止粘贴文本
请记住，它不会阻止将文本拖入文本框，因此需要 onsubmit 和服务器端验证。
@Robert 事实上，我总是有 PHP 表单验证，以防用户关闭了 javascript。
由于某种原因，这在我使用 onkeyup 时不起作用...当我使用 onkeypress 时效果很好，但这使得它检查字符为时已晚...
迟到的评论：但是你怎么能让它像 0.5 等那样输入浮点数？

【解决方案5】：

只要按下一个键或文本框失去焦点，只需使用正则表达式去除任何非数字字符。

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

【讨论】：

【解决方案6】：

包含有关输入字符信息的唯一事件是keypress。您可以从keydown 或keyup 事件的keyCode 属性推断出的任何与字符相关的内容都是不可靠的，并且取决于特定的键盘映射。以下将通过使用从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;
        }
    }
};

【讨论】：

@Tim Down 这也很好用，但同样，它不允许我在文本框中使用诸如 ctrl-A 之类的功能
@RobHargood，我的评论解释了为什么会这样，因为 Firefox 会传递 ctrl-t 等，就好像你只按 t 一样，没有可靠的方法来完全阻止 Firefox 中的 t 字母同时允许控制-t。如果您想要该功能，您可以使用replace，就像这里的其他一些示例一样，您可以被动而不是主动。
好点。我已经更新了我的答案以检查是否按下了 Ctrl 键。
Robert，您可以使用事件的 ctrlKey 属性完全可靠地区分 t 和 Ctrl-t。
@TimDown，即使在检查控制时它也对我不起作用，Mac 上的 Firefox 对我来说正在触发文本字段，就好像它只是被按下一样。

【解决方案7】：

我用这个：

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

说明所有浏览器都以不同的方式处理 jquery 按键事件。为了使其在 FF 中工作，添加了 $.inArray 检查。由于当使用 strg+tab 之类的组合时，firefox 的 keypress-event 不会触发，但其他组合会触发，因此 key.match 方法仍然为后者增加了一点价值，因为它启用了这些组合。

【讨论】：

【解决方案8】：

也许您正在使用引导程序。如果是这样，这可能就足够了：

<input type="text" data-mask="9999999">

Input mask

【讨论】：

这仅适用于固定长度的字段。例如，如果您可能存储从 1 到 1000 的数字，则您的用户必须键入 0001。对此不太友好。可能是电话号码、SSN 等。

【解决方案9】：

以下代码是我广泛使用的代码。我在论坛中找到了该脚本，但根据我的需要对其进行了修改和扩展：

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

添加<script type="text/javascript" src="jquery.numeric.js"></script> 然后使用

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

【讨论】：

【解决方案11】：

方法更简洁，易于理解：

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

【讨论】：

这不考虑美国键盘上的 shift 键，它还禁用退格键，这不是预期的效果。

【解决方案12】：

这是罗伯特答案的一种变体，允许输入一个小数点。如果已经输入了小数点，则只接受数字作为输入。

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

【讨论】：

【解决方案13】：

我知道已经有很多答案，但为了简单，我想添加另一个简单且一目了然的答案> 其中我们不必记住键码，它也适用于所有浏览器。

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

 }

&lt;input type="text" placeholder="Enter Value" id="myinput" /&gt;

【讨论】：

很好，但我们不能“TAB”离开该字段，使用 Ctrl+A 选择所有内容...所以它不能完全回答问题。
@Damien 我们也可以通过处理键盘和鼠标事件轻松做到这一点。为了简单起见，我将示例保持简单。

【解决方案14】：

值得指出的是，无论您如何通过前端（Javascript、HTML 等）设法控制它，您仍然需要在服务器上对其进行验证，因为没有什么可以阻止用户关闭 javascript ，甚至故意在您的表单中发布垃圾内容以试图破解您。

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

【讨论】：

【解决方案15】：

这也将启用小键盘输入。

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

【讨论】：

完美！正是我想要的。 Shift+1 仍在使用

【解决方案16】：

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

使用 Jquery 和 Javascript，看起来像：

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

无论是否使用 Jquery，Javascript 中的键码都是相同的。

【讨论】：

这对我来说看起来不错，尽管event.which 更适合规范化键码。
（我应该说，代码看起来很适合 my 的目的，但不幸的是不是 OP 的要求；））

【解决方案17】：

这是我的解决方案：以下工作的组合。

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

我在尝试自己解决这个问题时遇到了您的问题。这是我想出的解决方案。

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

【讨论】：

【解决方案19】：

所有答案都是过时的、冗长的并且会给您的用户带来烦恼。他们中的大多数甚至不过滤或允许粘贴的内容。

不是过滤输入，而是在提交表单之前进行一些验证，然后在服务器端进行验证。

HTML 已包含验证：

<input type="number" pattern="[0-9]+">

这也可以在移动设备上启用数字键盘。

【讨论】：

【解决方案20】：

这是我的插件：

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

【讨论】：

【解决方案21】：

有我目前的数字输入解决方案，需要在不同的浏览器中测试但似乎可以工作

支持逗号和句点分隔符（捷克语原生是逗号）、空格和小键盘/键盘数字输入。允许 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

【讨论】：

【解决方案22】：

我的功能：

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

【讨论】：

@TimNguyen 浮点数不起作用它正在接受所有字符

【解决方案23】：

您可以进行更改以接受 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;
}

【讨论】：

【解决方案24】：

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

您可以这样做以仅接受文本框中的数字，

 function onChange(event){
   var ckeckChars = /[^0-9]/gi;
   if(checkChars.test(event.target.value)) {
        event.target.value = event.target.value.replace(ckeckChars,"");
  }

【讨论】：

【解决方案26】：

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

在打字稿中

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

【讨论】：

【解决方案27】：

此 JavaScript 函数将用于限制字母和 Textbox 中的特殊字符，只有数字、删除、箭头键和将允许退格。 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 flag = false;
var x = e.which || e.keycode;
if ((x >= 48 && x <= 57) || x == 8 ||
    (x >= 35 && x <= 40) || x == 46)
    flag = true;
else
    flag = false;

if (flag && e.keyCode === 46 && $(e.currentTarget).val().split('.').length === 2) {
    flag = false;
}

return flag;
    }
</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>

Refrence

【讨论】：

【解决方案28】：

你可以通过引入keypresshandler函数来处理html上的te事件

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

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

        event.preventDefault();

        return false;
     }        
}

【讨论】：

【解决方案29】：

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

【讨论】：

使用这个解决方案，我们仍然可以在字段中粘贴文本 (Ctrl+V)。