JQuery只允许小数点后的两个数字

Question

我在这里发现了以下JQuery函数,它阻止用户输入任何不是数字或单个小数的内容.该功能运行良好但我想改进它以防止用户输入3个或更多小数位,即禁止99.999并允许99.99.有任何想法吗？

 function checkForInvalidCharacters(event, inputBox){                            
     if ((event.which != 46 || inputBox.val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {          
                event.preventDefault();           
            }   
     };

Answer 1

逻辑是每次用户输入数字时你必须检查两件事.

1. 用户是否输入了小数点？
2. 小数位数是否超过两位？

对于第一个,您可以使用$(this).val().indexOf('.') != -1

对于您可以使用的第二个$(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2

EDIT-1
此外,您必须添加event.which != 0 && event.which != 8以便箭头键和退格键在Firefox中工作(Manoj评论)

EDIT-2
此外,您必须添加,$(this)[0].selectionStart >= text.length - 2以便在光标位于小数点左侧时可以添加数字(BIdesi注释)

EDIT-3
此外,您必须检查用户是否已删除.并将其放置在其他位置以创建小数点后超过2位的值.所以你必须添加 $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));额外数字(GilbertoSánchez评论)

EDIT-4
要处理粘贴的数据,必须绑定粘贴事件处理程序.然后,您必须检查粘贴的数据是否.包含text.indexOf('.') > -1 小数点后的2位数text.substring(text.indexOf('.')).length > 3.如果是这样,你必须削减额外的数字.此外,您还必须检查用户是否输入了数字输入$.isNumeric()(darasd注释).

这是代码:

$('.number').keypress(function(event) {
    var $this = $(this);
    if ((event.which != 46 || $this.val().indexOf('.') != -1) &&
       ((event.which < 48 || event.which > 57) &&
       (event.which != 0 && event.which != 8))) {
           event.preventDefault();
    }

    var text = $(this).val();
    if ((event.which == 46) && (text.indexOf('.') == -1)) {
        setTimeout(function() {
            if ($this.val().substring($this.val().indexOf('.')).length > 3) {
                $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));
            }
        }, 1);
    }

    if ((text.indexOf('.') != -1) &&
        (text.substring(text.indexOf('.')).length > 2) &&
        (event.which != 0 && event.which != 8) &&
        ($(this)[0].selectionStart >= text.length - 2)) {
            event.preventDefault();
    }      
});

$('.number').bind("paste", function(e) {
var text = e.originalEvent.clipboardData.getData('Text');
if ($.isNumeric(text)) {
    if ((text.substring(text.indexOf('.')).length > 3) && (text.indexOf('.') > -1)) {
        e.preventDefault();
        $(this).val(text.substring(0, text.indexOf('.') + 3));
   }
}
else {
        e.preventDefault();
     }
});

.number {
  padding: 5px 10px;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number" />

Answer 2

也可以用正则表达式来完成：

    $('.class').on('input', function () {
        this.value = this.value.match(/^\d+\.?\d{0,2}/);
    });

将 css 选择器.class命名为您喜欢的任何名称并将其放在输入中。