将文本字段限制为仅限数字的最佳方法是什么?

Rob*_*ood 39 html javascript textbox numbers textfield

我使用以下Javascript来限制我的网站上的文本字段只接受数字输入,而不是其他字母或字符.问题是,它真的拒绝所有其他主要投入物,如ctrl- A选择文本,或者甚至像任何其他浏览器的功能ctrl- Tctrl- 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;
}
Run Code Online (Sandbox Code Playgroud)

编辑:提供已经解决了我的允许像命令的问题的解决方案中没有ctrl- A当选定文本框.这就是我在这里提出的要点,所以我又回到了使用我的原始剧本.那好吧.

Rob*_*ert 35

这是我再次为数字做的事情,它也允许所有的格式化程序.

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();
});?
Run Code Online (Sandbox Code Playgroud)

试试吧

http://jsfiddle.net/zpg8k/

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

编辑以详细说明多种方法

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

编辑2 - @Tim Down

好吧,根据评论,我必须调整两件我没想到的事情.首先,按键而不是已更新的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();
});?
Run Code Online (Sandbox Code Playgroud)

新jsfiddle:http://jsfiddle.net/umNuB/

  • 不要使用`keydown`或`keyup`来检查用户输入的字符.你获得的任何成功都将是巧合和不可靠的:一个不同的布局键盘或键盘来自你自己以外的文化将有不同的键映射,你的密钥代码将是无用的.包含字符信息的唯一事件是`keypress`. (6认同)
  • 数字是格式化程序,退格键,移位等等.当您按下一个键时,它应该向右显示键码,这样您就可以四处玩,看看您想要允许和禁止的内容. (2认同)
  • 仍允许我右键单击+粘贴文本. (2认同)
  • 另一个问题:在IE版本8中,包括版本8,数组没有`indexOf`方法. (2认同)

小智 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();
                 }
               });
Run Code Online (Sandbox Code Playgroud)

你也需要Backspace和Delete键;)

  • 我很困惑,它没有被包括在最佳答案中.也许编辑是必要的? (2认同)

Ham*_*und 15

这适用于IE,Chrome和Firefox:

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

  • 这太棒了,尽管它可以对正在发生的事情进行一些解释。 (2认同)
  • 检查NULL字符然后测试数字正则表达式"/\d /" (2认同)

dog*_*ane 11

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>
Run Code Online (Sandbox Code Playgroud)


Ran*_*Dev 5

只需在按下键或文本框失去焦点时使用正则表达式即可消除所有非数字字符。

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


Tim*_*own 5

包含有关键入的字符的信息的唯一事件是keypress。您可以从或events的keyCode属性推断出的任何与字符相关的内容都是不可靠的,并且依赖于特定的键盘映射。以下将通过使用从事件中获得的字符来防止所有主要浏览器的非数字键盘输入。它不会阻止用户粘贴或拖动非数字文本。keydownkeyupkeypress

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;
        }
    }
};
Run Code Online (Sandbox Code Playgroud)


hug*_*ige 5

我用这个:

    oEl.keypress(function(ev)
    {
        var sKey = String.fromCharCode(ev.which);
        if (!sKey.match(/[0-9]/) || !sKey === "") 
            ev.preventDefault();            
    });
Run Code Online (Sandbox Code Playgroud)

优点是,仍然允许每个不提供字段输入的键,因此您不必担心每个特殊键。即使像 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();
        }
    });
Run Code Online (Sandbox Code Playgroud)

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