Javascript/Jquery 验证按键/keydown 上的十进制输入

Posted 2023-05-09

【中文标题】Javascript/Jquery 验证按键/keydown 上的十进制输入

【英文标题】：Javascript/Jquery validating decimal input on keypress/keydown

【发布时间】：2012-09-21 12:06:03

【问题描述】：

我正在尝试找到一种方法来验证按键上的文本输入，我希望仅在我的文本输入中允许数字，包括小数。

我正在采用使用 jQuery.keydown 的方法，并检查密钥是什么，如果密钥不在允许列表中，则使用 event.preventDefault()。但从那以后，我了解到密钥在整个浏览器中并不一致，而且我也担心不同的操作系统。

我遇到过这个问题，但我不精通正则表达式，不确定这是否适合我的需求： jquery - validate characters on keypress?

使用这种方法，预期 00.00 的正则表达式会在输入 00. 时阻止用户，因为在键入时会检查正则表达式。

谢谢

【参考方案1】：

如果您想限制输入（而不是验证），您可以使用键事件。像这样：

<input type="text" class="numbersOnly" value="" />

还有：

jQuery('.numbersOnly').keyup(function ()  
    this.value = this.value.replace(/[^0-9\.]/g,'');
);

或，我们可以在用户“离开”字段后更新它，使用 on change 事件，这样用户仍然可以使用箭头键浏览文本。

jQuery('.numbersOnly').on('change', function ()  
    this.value = this.value.replace(/[^0-9\.]/g,'');
);

这会立即让用户知道他们不能输入字母字符等，而不是稍后在验证阶段。

您仍然需要验证，因为输入可能通过使用鼠标剪切和粘贴来填充，或者可能通过可能不会触发关键事件的表单自动完成器来填充。

小提琴：http://jsfiddle.net/shannonhochkins/eu7P9/

【讨论】：

谢谢伙计，你也不能使用箭头键来浏览文本，你必须为此添加自定义功能，我只是没有时间！跨度>

我可以在更改而不是键位上执行此操作，因此它会涵盖粘贴等。但除此之外，该正则表达式允许多个小数点。

@MatthewGrima：查看我更新的代码。它避免了输入中的多个点.

【参考方案2】：

您不应依赖关键事件，因为这意味着如果用户使用无效字符右键单击 -> 粘贴，验证将失败。

您应该改为使用类似 zurb 的 textchanged 事件 - 无论输入模式如何（键、粘贴、拖放等），它都会准确触发

http://www.zurb.com/playground/jquery-text-change-custom-event

在您的 textchanged 处理程序中，您可以输入适当的正则表达式来处理小数。

【讨论】：

我使用过它，因为我发现它非常好用且易于使用，并且还以我需要的方式应用了 Snake Eyes 的答案。谢谢

【参考方案3】：

我使用 e.which 来验证十进制数

$(document).ready(function ()  
    var isEnable=true;
$(".only-number-period").live('keydown', function (e) 
    //isEnable = (e.which != 110) ? false : true;
        if( ((e.which == 9) || (e.which == 46) || (e.which == 8) || (e.which == 110) || (e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105)))
            if(isEnable ==false && e.which ==110)return false;
        else
        return false
          
    if (isEnable == true)             
    isEnable=(e.which ==110)?false:true;
        
    );
);​

链接::http://jsfiddle.net/rTr2w/

【参考方案4】：

使用Shannon的回答，我提供以下简单的JS代码：

jQuery('.numbersOnly').keyup(function () 
    if(($(this).val().split(".")[0]).indexOf("00")>-1)
        $(this).val($(this).val().replace("00","0"));
     else 
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
    
);

查看实际操作：http://jsfiddle.net/SnakeEyes/eu7P9/2/

更新 为避免出现多个. 符号，请使用以下代码：

jQuery('.numbersOnly').keyup(function (e) 
    if(($(this).val().split(".")[0]).indexOf("00")>-1)
        $(this).val($(this).val().replace("00","0"));
     else 
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
    

    if($(this).val().split(".")[2] != null || ($(this).val().split(".")[2]).length )
        $(this).val($(this).val().substring(0, $(this).val().lastIndexOf(".")));
       
);

示例：http://jsfiddle.net/SnakeEyes/eu7P9/3/