Creating custom numeric field with negative values

Question

I want to create a custom numeric field instead of using Number type field.

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

So I have created this one:

$(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">

I have checked the text field for numbers and clamp the value between a min and max value. I think this text field is better than the default number field.

How can I allow negative numbers? Because currently, I have disabled all non-numeric characters.

Answer 1

You have a couple of problems. Firstly, keyCode 189 is the minus sign so you cannot use preventDefault() for this keyCode. See (e.keyCode !== 189) in your if condition.

Second, now that we've allowed minus sign you need to allow for only minus sign in addNumericOnlyEvent.

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

Here is my code:

$(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.