JQuery只允许小数点后的两个数字 [英] JQuery allow only two numbers after decimal point

问题描述

我发现以下JQuery函数此处阻止用户进入任何不是数字或单个小数的东西。该功能运行良好但我想改进它以防止用户输入3个或更多小数位，即禁止99.999并允许99.99。有什么想法？

I found the following JQuery function here which prevents a user from entering anything that's not a number or a single decimal. The function works well but I'd like to improve it to prevent the user from entering 3 or more decimal places i.e. disallow 99.999 and allow 99.99. Any ideas?

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

推荐答案

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

The logic is every time a user entering a number you have to check two things.

1. 用户是否输入了小数点？


2. 是小数位数两个以上？

对于第一个，您可以使用 $（this）.val（）。indexOf （'。'）！= -1

对于第二个，您可以使用 $（this）.val（）。substring（$（this） .val（）。indexOf（'。'），$（this）.val（）。indexOf（'。'）。length）。length> 2

For the first one you can use $(this).val().indexOf('.') != -1

For the second one you can use $(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2

EDIT-1

此外，您还需要添加 event.which！= 0&& event.which！= 8 这样箭头键和退格键在Firefox中工作（Manoj评论）

EDIT-1
Also, you have to add event.which != 0 && event.which != 8 so that arrow keys and backspace work in Firefox (Manoj comment)

EDIT-2

此外，你必须添加 $（this）[0] .selectionStart> = text.length - 2 以便你可以添加数字如果光标位于小数点左侧（BIdesi评论）

EDIT-2
Also, you have to add $(this)[0].selectionStart >= text.length - 2 so that you can add digits if the cursor is to the left of the decimal point (BIdesi comment)

EDIT-3

另外，你必须检查用户是否删除。并将其放置在其他地方，在小数点后创建一个超过2位数的值。所以你必须添加
$ this.val（$ this.val（）。substring（0，$ this.val（）。indexOf（'。'）+ 3））; 用于削减额外数字（GilbertoSánchez评论）

EDIT-3
Also, you have to check if user deleted . and placed it somewhere else creating a value with more than 2 digits after the decimal. So you have to add $this.val($this.val().substring(0, $this.val().indexOf('.') + 3)); for cutting extra digits (Gilberto Sánchez comment)

EDIT-4

处理粘贴数据，您必须绑定粘贴事件处理程序。然后您必须检查粘贴的数据是否。与 text.indexOf（'。'）> -1 和小数点后的2位数以上 text.substring（text.indexOf（'。'））。length> 3 。如果是这样，你必须削减额外的数字。此外，您必须检查用户输入的数字输入为 $ .isNumeric（）（darasd comment）。

EDIT-4
To handle pasted data, you must bind a paste event handler.Then you have to check if pasted data have . withtext.indexOf('.') > -1 and more than 2 digits after the decimal with text.substring(text.indexOf('.')).length > 3. If so, you have to cut extra digits. Also you have to check that user entered numeric input with $.isNumeric() (darasd comment).

此处是代码：

$('.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" />

这篇关于JQuery只允许小数点后的两个数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！