如何防止按键十进制数后两位？答案

【问题标题】：How to prevent keypress two digits after a decimal number?如何防止按键十进制数后两位？
【发布时间】：2013-03-18 19:29:48
【问题描述】：

我有一项任务是防止在十进制数字后按下两位数字。我的 jquery 文件是

$(function(){ 
    $('#name').bind('paste', function(){
    var self = this;
    setTimeout(function() {
        if(!/^[a-zA-Z]+$/.test($(self).val()))
            $(self).val('');
    }, 0);    
           }); 

        $('#salary').bind('paste', function(){
    var self = this;
    setTimeout(function() {
        if(!/^\d*(\.\d{1,2})+$/.test($(self).val()))
            $(self).val('');
    }, 0);    
           }); 

    $('.decimal').keyup(function(){
        var val = $(this).val();
        if(isNaN(val)){
             val = val.replace(/[^0-9]./g,'');


             if(val.split('.').length>2) 
                 val =val.replace(/\.+$/,"");
        }
        $(this).val(val); 
    });
    });

我的html页面是

<b>Name</b>
<input type="text" id="name"  /><br/>
<b>Salary</b>
<input type="text" id="salary"  class="decimal" />

这里我只想写小数点后两位，我该怎么做？你可以在http://jsfiddle.net/V6s4B/看到我的代码

【问题讨论】：

我会在该人完成输入数据时验证输入，而不是同时。这将使整个事情变得容易。 ...只是一个建议。
你能帮我做这件事吗？你可以在jsfiddle.net/V6s4B看到我的代码
我不是交互设计师，但作为用户，当我输入的所有内容立即更改为其他内容时，我不会太高兴。我建议要么告诉用户期望什么样的输入（之前和之后）。
我也有同样的问题...
@mrhobo-我只想要小数点后的两个数字。

标签： javascript html jquery textinput

【解决方案1】：

您可以在keypress 上处理keyup 之前的按键事件，如果输入不符合我们的喜好，我们可以禁止该事件发生。像这样的：

更新

不幸的是，我在下面的原始答案在某些无法准确表示为浮点数的数字上失败了。这是另一种解决方案，它使用方便的辅助函数检查 '.' 字符的位置与字符串的长度。

jsFiddle

$('.decimal').keypress(function (e) {
    var character = String.fromCharCode(e.keyCode)
    var newValue = this.value + character;
    if (isNaN(newValue) || hasDecimalPlace(newValue, 3)) {
        e.preventDefault();
        return false;
    }
});

function hasDecimalPlace(value, x) {
    var pointIndex = value.indexOf('.');
    return  pointIndex >= 0 && pointIndex < value.length - x;
}

原答案

jsFiddle

$('.decimal').keypress(function (e) {
    var character = String.fromCharCode(e.keyCode)
    var newValue = this.value + character;
    if (isNaN(newValue) || parseFloat(newValue) * 100 % 1 > 0) {
        e.preventDefault();
        return false;
    }
});

请注意，如果 newValue 包含的数字超过 2 位小数，parseFloat(newValue) * 100 % 1 > 0 的计算结果为 true。

【讨论】：

等一下，只有我一个不会输入 1.11 或 2.22 吗？它似乎在某些输入上出现错误。
试试我的，很确定它有效，它适用于我输入的所有数字，你只需要做一些检查以确保它没有字母，我也会添加，稍等片刻。 Grrr 与删除除数字以外的任何东西作斗争，并且必须跑去工作。小数功能虽然有效
@Tyriar-它只适用于 Jsfiddle。它不适用于我的页面
修正了答案，使用了不同的方法。
@DanielImms- 它不起作用。运行此代码时，键盘上的所有键都受到限制。（仅适用于 firefox）

【解决方案2】：

$("#salary").keyup(function(){
    var number = ($(this).val().split('.'));
    if (number[1].length > 2)
    {
        var salary = parseFloat($("#salary").val());
        $("#salary").val( salary.toFixed(2));
    }
  });

http://jsfiddle.net/calder12/fSQpc/

不要把信放进盒子里，你得把两个放在一起，我没时间。

    if (this.value.match(/[^0-9]./g)) {
      this.value = this.value.replace(/[^0-9]./g, '');
      return false;
    }

【讨论】：

你的答案是正确的，但你只提到了两个浮点数。在上面我们不能在那个文本框上写任何符号或字母
是的，我可以给你单独的代码来阻止它，但我没有时间将两者整合在一起，你必须这样做。
嗯，正如我所说，完成工作的 2 岁代码。额外的一行修复了控制台错误。你没有什么比巨魔 2 岁的回应更好的事了？ jsfiddle.net/fSQpc/49
在这个解决方案中，我们可以添加多个小数点，在第一个小数点上，它限制用户在小数点后添加2个数字，如果添加第二个小数点，则解决方案失败

【解决方案3】：

Another Possible Solution(Demo):

Number.prototype.toFixedDown = function(digits) {
  var n = this - Math.pow(10, -digits)/2;
  n += n / Math.pow(2, 53); // added 1360765523: 17.56.toFixedDown(2) === "17.56"
  return n.toFixed(digits);
}
$( function() {
    $('.two-digits').keyup(function(){
        if($(this).val().indexOf('.')!=-1){         
            if($(this).val().split(".")[1].length > 2){                
                if( isNaN( parseFloat( this.value ) ) ) return;
                this.value = parseFloat(this.value).toFixedDown(2);
            }  
         }            
         return this; //for chaining
    });
});

【讨论】：

但是这里我们可以写字母。还支持另一个浮点数

【解决方案4】：

这可能对某些人有帮助。我混合了这个人的答案，@Tats_innit 来自https://stackoverflow.com/a/10514166/5382523 和上面的@Rick Calder。

编辑也来自这个人，来自https://stackoverflow.com/a/17289322的isJustMe 对于带有“|| 0”的 parseFloat。因为如果输入的字段为空或为零，则显示“NaN”并且您无法删除它。

HTML

<input type="text" name="txt_prod_price" id="txt_prod_price" class="form-control price" maxlength="20" placeholder="">

JAVASCRIPT (JQUERY)

$('.price').keypress(function(event) {

          if(event.which < 46 || event.which > 59) {
              event.preventDefault();
          } // prevent if not number/dot

          if(event.which == 46 && $(this).val().indexOf('.') != -1) {
              event.preventDefault();
          } // prevent if already dot

          var number = ($(this).val().split('.'));
          if (number[1].length > 2)
          {
           var price = parseFloat($("#txt_prod_price").val()) || 0;
           $("#txt_prod_price").val(price.toFixed(2));  
          }

      });

“价格”是预定义的。

注意：仍然有错误的输入，但仍然在踢。 (y)

【讨论】：

【解决方案5】：

我是这样做的：提供了一个只允许数字的类，然后供您输入：

  var numberOfDecimals = 2;
  $(document).on("input", ".allow-only-numbers", function () {
    var regExp = new RegExp('(\\.[\\d]{' + numberOfDecimals + '}).', 'g')    
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1').replace(regExp, '$1');
});

【讨论】：