4

ユーザーが小数点以下 2 桁を超える数字を入力できないようにする jQuery プラグインを作成しようとしています。具体的には：

  • 入力に含まれてい12て、ユーザー3が最後に入力した場合、それは機能するはずです。
  • 入力に含まれ12.34、ユーザー1が最後に入力した場合、何も起こらないはずです。
  • 入力に含まれている場合12.34、ユーザー1が最初に入力すると、機能するはずです。

これが私が遭遇している問題です：

  • にバインドするとkeypress、「提案された新しい値」が何であるかわかりません。$(this).val()ユーザーがキーを押す前の値であり、ユーザーが入力フィールドのどこに入力しているのかわかりません。
  • にバインドするとkeyup、$(this).val()新しい値になりますが、テキスト入力には既に表示されています。小数点以下の桁数が多い場合は消去できますが、グリッチに見えます。

これどうやってするの？

4

2 に答える 2

3

メッベこれ？

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/でテストおよび動作中

于 2012-06-14T20:55:31.383 に答える
2

私の目的のために働く解決策

これが私が思いついたものです。

長所

  • 過剰な小数点以下の桁数はまったく表示されません（表示されてすぐに消去されるのとは対照的です）
  • ユーザーは複数の小数点以下を入力することもできません

短所

このソリューションは、この中の他の2つのjQueryプラグインに依存していますが、とにかくプロジェクトにすでに含まれています。

  • caret()の一部である関数を使用して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);
}

サポート機能：

hasNDecimalPlaces = function (number, places) {
  fixed = parseFloat(number).toFixed(places);
  return number.toString() === fixed;
};
于 2012-06-14T20:45:21.277 に答える