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

Javascript/Jquery validating decimal input on keypress/keydown

提问by Matthew Grima

I'm trying to find a way to validate a text input on key press, I want to allow numbers only inside my text input including decimals.

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

I was taking the approach of using jQuery.keydown, and checking what the key was and using event.preventDefault() if the key was not in the allowed list. But since then I've read that keys aren't consistent throughout browsers and I'm also worries about different OS's.

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

I've come across this question but I'm not fluent in regex and not sure whether this would suit my needs: jquery - validate characters on keypress?

我遇到过这个问题，但我不精通正则表达式，不确定这是否适合我的需求： jquery - 在按键上验证字符？

With that approach a regex that expects 00.00 would stop the user when 00. is typed in since the regex is checked upon key up.

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

Thanks

谢谢

回答by Shannon Hochkins

If you want to restrict input (as opposed to validation), you could work with the key events. something like this:

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

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

And:

和：

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

or, we can update this after the user has 'left' the field, with the on change event, this way the user can still navigate through the text with the arrow keys.

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

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

This immediately lets the user know that they can't enter alpha characters, etc. rather than later during the validation phase.

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

You'll still want to validate because the input might be filled in by cutting and pasting with the mouse or possibly by a form autocompleter that may not trigger the key events.

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

Fiddle: http://jsfiddle.net/shannonhochkins/eu7P9/

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

回答by techfoobar

You should not rely on key events as that would mean the validation would fail if the user does a right-click -> pastewith invalid characters.

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

What you should instead do is use something like zurb's textchangedevent - which will accurately trigger regardless of the mode of input (key, paste, drag and drop, whatever)

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

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

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

Inside your textchangedhandler, you can put in the appropriate regex to deal with decimals.

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

回答by Suraz

I have used e.which to validate the decimal numbers

我已经使用 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;
        }
    });
});?

link::http://jsfiddle.net/rTr2w/

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

回答by Snake Eyes

using Shannon's answer, I provide the following simple JS code:

使用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,''));
    }
});

See this in action: http://jsfiddle.net/SnakeEyes/eu7P9/2/

看看这个：http: //jsfiddle.net/SnakeEyes/eu7P9/2/

updateTo avoid multiple .symbol, use the following code:

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

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

Example: http://jsfiddle.net/SnakeEyes/eu7P9/3/

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