javascript - 创建具有负值的自定义数字字段

Question

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

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

所以我创建了这个:

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

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

我已检查文本字段中的数字并将值限制在最小值和最大值之间。我认为这个文本字段比默认的数字字段更好。

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

Answer 1

您有几个问题。首先，keyCode 189 是减号，因此您不能对此keyCode 使用preventDefault()。请参阅 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.