将文本字段限制为数字的最佳方法？ [英] Best way to restrict a text field to numbers only?

问题描述

我使用以下Javascript将我的网站上的文本字段限制为仅接受数字输入，并且没有其他字母或字符。问题是，它真的拒绝所有其他键输入，如 ctrl - A 来选择文本，甚至任何其他浏览器功能，如 ctrl - T 或 ctrl - W 选中文本框。有谁知道一个更好的脚本只允许数字输入，但不阻止正常的命令（不直接输入到字段中）？感谢
这里是我现在使用的代码：

pre $函数数字（e，十进制）
{
var key;
var keychar;

if（window.event）
key = window.event.keyCode;
else if（e）
key = e.which;
else
返回true;

keychar = String.fromCharCode（key）; （（key == null）||（key == 0）||（key == 8）||（key == 9）||（key == 13）||

（key == 27））
返回true; （（0123456789）。indexOf（keychar）> -1））
return true;
else if
else if（decimal&&（keychar ==。））
return true;
else
返回false;

编辑：没有提供的解决方案解决了我允许像< kbd> ctrl - A ，同时选中文本框。这就是我在这里问的全部要点，所以我已经回到使用我的原始脚本。呵呵。

解决方案

这是我为数字创造的另一次，它也允许所有的格式化器。 p>

jQuery

  $（'input'）.presspress（function（e ）（
 var a = []; 
 var k = e.which; 
 
（i = 48; i <58; i ++）
 a。 push（i）; 
 
 if（！（a.indexOf（k）> = 0））
 e.preventDefault（）; 
}）; 
  

尝试一下

http://jsfiddle.net/zpg8k/

请注意，为了粘贴/上下文菜单以及不支持粘贴事件的浏览器，我们也希望在提交/服务器端进行过滤。

编辑以详细说明多个方法

我看到你在'接受'答案中弹跳，所以我会澄清一些事情。你真的可以使用这里列出的任何方法，它们都可以工作。我个人的做法是使用我的实时客户端过滤，然后在提交和服务器端使用正如其他人所建议的正则表达式。然而，客户端本身不会100％有效，因为没有任何东西阻止我把 document.getElementById（'theInput'）。value ='嘿，信件'。 ;
在控制台中绕过任何客户端验证（除了轮询，但我可以从控制台取消 setInterval ）。使用你喜欢的任何一种客户端解决方案，但要确保你在提交和服务器端实现了一些东西。

编辑2 - @Tim Down

好吧，根据评论我必须调整两件事，我没有想到。首先，按键代替已更新的keydown，但IE中缺少indexOf（严重的是微软！？）打破了上面的例子。这里有一个替代方案：

$ $ $（'input'）。keypress（function（e）{
var a = [] ;
var k = e.which;

（i = 48; i <58; i ++）
.p.p（i）;

if（！（$。inArray（k，a）> = 0））
e.preventDefault（）;
}）;

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

I'm using the following Javascript to restrict a text field on my website to only accept numerical input, and no other letters or characters. The problem is, it REALLY rejects all other key inputs, like ctrl-A to select the text, or even any other browser functions like ctrl-T or ctrl-W while the text box is selected. Does anyone know of a better script to only allow numerical input, but not block normal commands (that aren't being directly input into the field)? Thanks Here is the code I'm using now:

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

Edit: None of the solutions provided have solved my problem of allowing commands like ctrl-A while the text box is selected. That was the whole point of my asking here, so I have gone back to using my original script. Oh well.

解决方案

This is something I made another time for just numbers, it will allow all the formatters as well.

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

Try it

http://jsfiddle.net/zpg8k/

As a note, you'll want to filter on submit/server side as well, for sake of pasting/context menu and browsers that don't support the paste event.

Edit to elaborate on multiple methods

I see you're bouncing around the 'accepted' answer, so I'll clear something up. You can really use any of the methods listed here, they all work. What I'd personally do is use mine for live client side filtering, and then on submit and server side use RegEx as suggested by others. However, no client side by itself will be 100% effective as there is nothing stopping me from putting document.getElementById('theInput').value = 'Hey, letters.'; in the console and bypassing any clientside verification (except for polling, but I could just cancel the setInterval from the console as well). Use whichever client side solution you like, but be sure you implement something on submit and server side as well.

Edit 2 - @Tim Down

Alright, per the comments I had to adjust two things I didn't think of. First, keypress instead of keydown, which has been updated, but the lack of indexOf in IE (seriously Microsoft!?) breaks the example above as well. Here's an alternative

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

New jsfiddle: http://jsfiddle.net/umNuB/

这篇关于将文本字段限制为数字的最佳方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！