如何防止在小数后按下两个数字的键？

Question

如何防止在小数后按下两个数字的键？

12

我有一个任务是防止在小数点后两位之后按键。我的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/中看到我的代码。

- Monica

我会在用户输入数据完成后，而不是在输入过程中验证输入。这将使整个过程更加简单。这只是一个建议。 - winner_joiner

你能帮我做这个吗？你可以在http://jsfiddle.net/V6s4B/上看到我的代码。 - Monica

1

我不是交互设计师，但作为用户，当我输入的每个字符都立即被更改成其他内容时，我会感到不太满意。我建议在输入之前和之后告知用户期望的输入类型。 - Lodewijk Bogaards

@mrhobo-我只想保留小数后面的两位数字。 - Nithin Viswanathan

出于可用性的考虑，我会写出允许输入哪些信息或示例。否则有些用户可能会认为网站出了问题。 - winner_joiner

5个回答

4

$("#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;
    }

- Rick Calder

你的答案是正确的，但你只提到了两个浮点数。在上面的文本框中，我们不能写任何符号或字母。 - Nithin Viswanathan

是的，我可以给你单独的代码来停止那个，但我没有时间将两者集成在一起，你必须自己完成。 - Rick Calder

1

嗯，就像我说的，这是两年前的代码，但它能够完成任务。再加上一行代码就可以修复控制台错误。你难道没有更好的事情去做，而要来挑战两年前的回答吗？http://jsfiddle.net/fSQpc/49/ - Rick Calder

在这个解决方案中，我们可以添加多个小数点。在第一个小数点后，它会限制用户在小数点后添加2位数字。如果添加第二个小数点，则解决方案将失败。 - bajran

0

另一种可能的解决方案（演示）：

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

- Zaheer Ahmed

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

0

这可能对一些人有所帮助。我混合了这个人的答案，@Tats_innit来自https://dev59.com/tWPVa4cB1Zd3GeqP7aHJ#10514166和@Rick Calder上面的答案。

编辑还有来自这个人isJustMe的答案，https://stackoverflow.com/a/17289322中的parseFloat与“|| 0”。因为如果输入字段为空或零，则会显示“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)

关于toFixed的更多信息 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

- Quer

-1

我是这样做的：提供一个类 allow-only-numbers 来限制您的输入：

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

- MarwaAhmad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Imms · Accepted Answer

如果输入不符合我们的要求，我们可以在keypress事件之前处理按键事件，这样可以防止该事件的发生。代码示例如下：

更新

很遗憾，我原来的答案无法处理某些不能准确表示为浮点数的数字。这里提供另一种解决方案，它使用一个方便的帮助函数来检查'.'字符的位置是否与字符串长度匹配。

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。