Question

我正在尝试编写一个jQuery插件，以防止用户输入超过2位小数的数字。具体做法是：

如果输入包含12且用户在结尾处输入3，则应该有效。
如果输入包含12.34且用户在结尾处输入1，则不会发生任何事情。
如果输入包含12.34且用户在开头输入1，则应该有效。

以下是我遇到的问题：

如果我绑定到keypress，我不知道“建议的新价值”是什么; $(this).val()是用户按下键之前的值，我不知道用户输入的输入字段在哪里。
如果我绑定到keyup，$(this).val()是新值，但它已经出现在文本输入中。如果它有太多的小数位，我可以擦除它，但它看起来很小。

我该怎么做？

Answer 1

Mebbe这个？

jQuery.fn.limitDecimalPlaces = function(maxPlaces) {
  $(this).on('keyup', function(e) {
    integer = e.target.value.split('.')[0],
    mantissa = e.target.value.split('.')[1];

    if (typeof mantissa === 'undefined') {
      mantissa = '';
    }

    if (mantissa.length > maxPlaces) {
      e.target.value = integer + '.' + mantissa.substring(0, maxPlaces);
    }
  });
}

在http://jsfiddle.net/vdZfH/2/

进行测试和工作

Answer 2

适用于我的目的的解决方案

这就是我想出来的。

赞成

过多的小数位数根本不显示（与出现和立即删除相反）
用户也无法输入多个小数

缺点

这个解决方案依赖于其他2个jQuery插件，但无论如何我已经在我的项目中使用了它们。

我正在使用caret()的{{1}}函数来确定用户输入框中的输入位置。
我已在此输入上使用jQuery.maskedInput，以确保只允许输入jQuery.keyfilter和1-9。（它只考虑单独的击键，而不是结果输入内容。）

代码

支持功能：

jQuery.fn.limitDecimalPlaces = function (maxPlacesArg) {
  $(this).each(function() {
    var maxPlaces, presetValue;

    if (maxPlacesArg) {
      maxPlaces = maxPlacesArg;

    } else {
      presetValue = $(this).attr('value');

      // If the value attribute has a decimal in it...
      if (presetValue.indexOf('.') !== -1) {

        // ... assume it has the correct number of places
        maxPlaces = presetValue.split('.')[1].length;
      } else {

        // Sensible default
        maxPlaces = 2;
      }
    }
    $(this).bind("keypress", function(e) {
      var currentVal, cursorIsAfterDecimal, hasMaxDecimalPlaces, inputHasDecimal, keystrokeIsDecimal;
      currentVal = $(this).val();
      inputHasDecimal = currentVal.indexOf('.') !== -1;
      if (inputHasDecimal) {
        // Booleans
        keystrokeIsDecimal = String.fromCharCode(e.which) === '.';
        hasMaxDecimalPlaces = athena.format.hasNDecimalPlaces(currentVal, maxPlaces);
        cursorIsAfterDecimal = ($(this).caret().begin) > (currentVal.lastIndexOf('.'));

        if (keystrokeIsDecimal || (hasMaxDecimalPlaces && cursorIsAfterDecimal)) {
          e.preventDefault();
        }
      }
    });
  });
  return $(this);
}

如何使用jQuery来防止用户输入太多小数位？

2 个答案:

适用于我的目的的解决方案

赞成

缺点

代码