Jquery Masked Input插件允许点

时间:2012-11-08 21:27:51

标签: javascript jquery jquery-plugins jquery-events maskedinput

我正在使用JQuery Masked输入插件。

$("#percent").mask("99.99?9");

这允许使用10.999, 10.99, 01.999, 01.99

之类的数字

我想要实现的是我不希望用户输入01.99。相反,如果用户类型1.99我想在0 1之前自动添加。这就是我的开始,但不知道如何继续:

  //assume i typed in field 11.99
  $(document).on('keyup', '#percent', function(evt) {
    var input = $(this).val();
    alert(input); // 11.99_
    if(evt.which == '190' || evt.which == '110') {
       //if dot is clicked 
       alert(parseInt(input)); // 11
    }
});

请注意,警报输入在末尾打印带有下划线的11.99_,因为第三个值是可选的,我没有输入它。

现在此值非常正常,但如果用户输入1.99,则无法自动将9移至1以填充2位数,所以它将返回19.9,这是无效的,因为必须有2小数,如上所定义。因此,在我的if语句中,我希望能够检测输入的内容是否小于10,如果小数点小于10,则在开头添加0

好的,我找到了underscore _的修补程序:

    $("#percent").mask("99.99?9", {placeholder: ""})

但仍未解决输入1.9919.9

的其他问题

1 个答案:

答案 0 :(得分:0)

您可以拦截keydown来执行此操作,但您需要一些方法来刷新插件状态。

以下代码可以正常工作:

$("#percent").bind({
    keydown: function(e) {
        // custom handler for dot
        var userInput = parseFloat($("#percent").val());
        if(e.which == '190' || e.which == '110') {
            // if entered number is integer and less than 10
            if(userInput % 1 === 0 && userInput < 10) {
                // prevent default mask input handlers from calling
                e.preventDefault();
                e.stopImmediatePropagation();

                // update value
                $("#percent").val('0'+userInput+'.');

                // simulate paste event to refresh mask input plugin state
                $("#percent").trigger('paste').trigger('input');
            }
        }       
    }
}).mask("99.99?9", {placeholder: ""});

使用JSFiddle here