Question

我想创建一个自定义数字字段，而不是使用数字类型字段。

＆＃13;

<input id="number" type="number" value="0">

＆＃13;

所以我创造了这个：

＆＃13;

$(document).ready(function() {
  addNumericOnlyEvent($("#edt"), 0, 100);
});

function addNumericOnlyEvent(element, minValue, maxValue) {
  element.on('input', function(e) { // clamp the value between min and max
    var currentValue = Number(element.val());

    if (isNaN(parseFloat(currentValue))) {
      element.val(minValue);
    }

    if (currentValue < minValue) {
      element.val(minValue);
    }

    if (currentValue > maxValue) {
      element.val(maxValue);
    }
  });

  element.keydown(function(e) { // check the digits for numbers
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
      (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
      (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
      (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
      (e.keyCode >= 35 && e.keyCode <= 39)) {
      return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }
  });
}

＆＃13;

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

＆＃13;

我已检查文本字段中的数字，并将值夹在最小值和最大值之间。我认为此文本字段优于默认数字字段。

我如何允许负数？因为目前我已禁用所有非数字字符。

Answer 1

你有几个问题。首先，keyCode 189是减号，因此您无法将preventDefault()用于此keyCode。请参阅if条件中的(e.keyCode !== 189)。

其次，既然我们允许减号，您需要在addNumericOnlyEvent中仅允许减号。

        if(element.val() === "-")
        return;

这是我的代码：

$(document).ready(function() {
  addNumericOnlyEvent($("#edt"), -5, 100);
});

function addNumericOnlyEvent(element, minValue, maxValue) {
  element.on('input', function(e) { // clamp the value between min and max

        if(element.val() === "-")
        return;

        var currentValue = Number(element.val());

    if (isNaN(parseFloat(currentValue))) {
      element.val(minValue);
    }

    if (currentValue < minValue) {
      element.val(minValue);
    }

    if (currentValue > maxValue) {
      element.val(maxValue);
    }
  });

  element.keydown(function(e) { // check the digits for numbers
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
      (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
      (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
      (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
      (e.keyCode >= 35 && e.keyCode <= 39)) {
      return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105) && (e.keyCode !== 189)) {
      e.preventDefault();
    }
  });
}

Working Fiddle here.

使用负值创建自定义数字字段

1 个答案: