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

时间:2012-09-30 08:14:34

标签: javascript jquery regex validation keydown

我正在尝试找到一种方法来验证按键上的文本输入,我想只在我的文本输入中包含数字,包括小数。

我正在采用jQuery.keydown的方法,检查密钥是什么,如果密钥不在允许列表中,则使用event.preventDefault()。但从那时起我就读到各个浏览器的密钥不一致,我也担心不同的操作系统。

我遇到过这个问题,但我不能说正则表达式,也不确定这是否符合我的需要: jquery - validate characters on keypress?

使用这种方法,当键入00时,期望00.00的正则表达式将停止用户,因为在加密时检查正则表达式。

由于

4 个答案:

答案 0 :(得分:10)

如果要限制输入(而不是验证),则可以使用关键事件。像这样的东西:

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

答案 1 :(得分:3)

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

你应该做的是使用类似zurb的textchanged事件 - 无论输入模式如何(键,粘贴,拖放等)都会准确触发

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

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

答案 2 :(得分: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/

答案 3 :(得分:2)

使用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/