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

- user676567

---

这个函数对我来说不太好用。我可以输入122.33.33.3343。 - laaposto

嗨，laaposto，你尝试从keypress函数中调用它了吗？$('#amount').keypress(function(event) {
checkForInvalidCharacters(event, $(this)); }); - user676567

Answer 1

每次用户输入一个数字时，需要检查两件事情：

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

对于第一项，可以使用$(this).val().indexOf('.') != -1进行检查。

对于第二项，可以使用$(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2进行检查。

编辑-1
此外，还需添加event.which != 0 && event.which != 8以确保Firefox中的箭头键和后退键正常工作（Manoj评论）

编辑-2
还需添加$(this)[0].selectionStart >= text.length - 2以确保光标在小数点左侧时仍然可以添加数字（BIdesi评论）

编辑-3
还需检查用户是否删除了.并将其放置在其他位置，从而创建了小数点后面有多于2个数字的值。因此，需要添加$this.val($this.val().substring(0, $this.val().indexOf('.') + 3));来剪切额外的数字（Gilberto Sánchez评论）

编辑-4
为了处理粘贴的数据，必须绑定一个paste事件处理程序。然后需要检查粘贴的数据是否带有.和多于2个小数位，是的话就要使用text.indexOf('.') > -1和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" />

- laaposto

---

@Manoj，你能指出具体的问题吗？因为我看它是可以工作的。你试图输入什么，却没有按预期工作？ - laaposto

@Manoj 我注意到在Firefox中退格键无法正常工作。因此，我更新了我的答案。感谢您指出。 - laaposto

无法适用于该场景，输入12.34，然后使用箭头键移动到“2”的位置，但无法删除它并替换为其他数字。 - BIdesi

@BIdesi 很好的发现！我更新了代码，现在你的场景可以正常工作了。 - laaposto

谢谢您，但如果我删除“.”并将其放在另一个地方会发生什么？例如，如果我有22.45，然后我删除小数点并像这样放置它：2.245？ - Gilberto Sánchez

Answer 2

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

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

将CSS选择器.class命名为您喜欢的任何名称，并将其放在输入框上。

- Tegge

---

如果我们只在数字前面写十进制，则会删除输入的值。它不应该删除输入的值，而是禁止在第一个位置输入小数点（.）。 - Rashid Khan

Answer 3

我已经更新了函数以适应更多情况。

1. 它允许负数
2. 当小数点右侧已经有2个数字时，它允许您编辑小数点左侧的数字
3. 在Firefox中，它允许您使用箭头键和退格键
4. 它还可以处理粘贴的数据

/**
 * Given an input field, this function will only allow numbers with up to two decimal places to be input.
 * @param {object} element
 * @return {number}
 */
function forceNumber(element) {
  element
    .data("oldValue", '')
    .bind("paste", function(e) {
      var validNumber = /^[-]?\d+(\.\d{1,2})?$/;
      element.data('oldValue', element.val())
      setTimeout(function() {
        if (!validNumber.test(element.val()))
          element.val(element.data('oldValue'));
      }, 0);
    });
  element
    .keypress(function(event) {
      var text = $(this).val();
      if ((event.which != 46 || text.indexOf('.') != -1) && //if the keypress is not a . or there is already a decimal point
        ((event.which < 48 || event.which > 57) && //and you try to enter something that isn't a number
          (event.which != 45 || (element[0].selectionStart != 0 || text.indexOf('-') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
          (event.which != 0 && event.which != 8))) { //and the keypress is not a backspace or arrow key (in FF)
        event.preventDefault(); //cancel the keypress
      }

      if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2) && //if there is a decimal point, and there are more than two digits after the decimal point
        ((element[0].selectionStart - element[0].selectionEnd) == 0) && //and no part of the input is selected
        (element[0].selectionStart >= element.val().length - 2) && //and the cursor is to the right of the decimal point
        (event.which != 45 || (element[0].selectionStart != 0 || text.indexOf('-') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
        (event.which != 0 && event.which != 8)) { //and the keypress is not a backspace or arrow key (in FF)
        event.preventDefault(); //cancel the keypress
      }
    });
}

forceNumber($("#myInput"));

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

- Mike

Answer 4

数字值带有小数点，最多保留两位小数的验证。

依赖于 jQuery。

HTML -

<span>Float</span>
<input type="text" name="numeric" class='allownumericwithdecimal'>
<div>Numeric values only allowed  (With Decimal Point) </div>

JQuery代码 -

方法1-

    $(".allownumericwithdecimal").on("keypress keyup blur", function (event) {
     var patt = new RegExp(/[0-9]*[.]{1}[0-9]{2}/i);
     var matchedString = $(this).val().match(patt);
     if (matchedString) {
         $(this).val(matchedString);
     }
     if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
         event.preventDefault();
     }
 });

方法二 -

 $(".allownumericwithdecimal").on("keypress keyup blur", function (event) {
     var patt = new RegExp(/(?<=\.\d\d).+/i);
     $(this).val($(this).val().replace(patt, ''));

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

- Ravindra Vairagi

---

我在一个项目中实现了方法2，但发现它只在Chrome浏览器中有效。正向先行断言在其他浏览器中不起作用（几个小时后我才知道）。虽然我使用了以下代码，但方法1在我测试的所有四个浏览器中都有效： var patt = new RegExp(/^\d+\.\d\d/i); - mrturtle

Answer 5

谢谢！我已经添加了删除数字和'.'的可能性，一旦键入：

event.keyCode !== 8对于退格执行该操作。

event.keyCode !== 46对于删除执行该操作。

$( document ).ready(function() {

    $('#Ds_Merchant_Amount').keypress(function(event) {
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) ) {
        if (event.keyCode !== 8 && event.keyCode !== 46 ){ //exception
            event.preventDefault();
        }
    }
    if(($(this).val().indexOf('.') != -1) && ($(this).val().substring($(this).val().indexOf('.'),$(this).val().indexOf('.').length).length>2 )){
        if (event.keyCode !== 8 && event.keyCode !== 46 ){ //exception
            event.preventDefault();
        }
    }
  });
});

- gtamborero

Answer 6

我已更新此例程，以允许标准编辑功能，因为这些在上述代码中被阻止了。（此例程仅用于处理浮点数，但可以适应只允许小数点后2位的情况）

var value = $(this).val().toString();

// Allowed Keys
if (event.which === 8 || event.which === 46 // Character delete
    || event.which === 16 || event.which === 17 // Modifier Key
    || event.which === 37 || event.which === 39  // Arrow Keys
    || (event.key.toLowerCase() === "a" && event.ctrlKey) // Select All
    || (event.key.toLowerCase() === "c" && event.ctrlKey) // Copy
    || (event.key.toLowerCase() === "x" && event.ctrlKey) // Cut
    || (event.key.toLowerCase() === "v" && event.ctrlKey) // Paste
    || (event.which === 45 && event.ctrlKey) // Old school copy (CTRL + INSERT)
    || (event.which === 46 && event.shiftKey) // Old school cut (SHIFT + DELETE)
    || (event.which === 45 && event.shiftKey) // Old school paste (SHIFT + INSERT)
    || (event.which === 35) // END
    || (event.which === 36) // HOME
    || (event.which === 35 && event.shiftKey) // SHIFT + END
    || (event.which === 36 && event.shiftKey) // SHIFT + HOME
    )
{
    return;
}
else if (event.which === 190) // Process decimal point
{
    if (value == "" || value.indexOf(".") > -1)
    {
        event.preventDefault();
    }
}
else if (event.which < 48 || event.which > 57 || event.ctrlKey || event.shiftKey) // Reject anything else that isn't a number
{
    event.preventDefault();
}

- Dreamwalker

Answer 7

试一下

HTML

<input type="text" id="min_rent" name="min_rent" onkeypress="return isPrice(event,$('#min_rent').val())">

Jquery

function isPrice(evt,value) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if((value.indexOf('.')!=-1) && (charCode != 45 && (charCode < 48 || charCode > 57)))
        return false;
    else if(charCode != 45 && (charCode != 46 || $(this).val().indexOf('.') != -1) && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

工作链接 演示

- Sakthi Karthik