Как в input c JS задать, чтобы принимались только + числа и -

Question

Нужно прописать в input box, чтобы он принимал целые значения **(макс. 4 цифры, + или -) Не более четырех символов, если число +, или 5 символов, если число -.

Знак минус только первый.

Вот наброски моего кода:

function f(iv) {

  iv= (iv) ? iv: window.event;
  var newC = (iv.which) ? iv.which : iv.keyCode;

  if ((newC >= 48 && newC <= 57) || newC == 45) {
    return true;
  }
  return false;
}

<input id="f" type="text" maxlength="4" onkeypress="return f(event);">

У меня он принимает знак - и в середине, и принимает -999 только, считает - знаком.

Помогите поправить код.

Answer 1

function f(elem) {
  var oldValue = elem.dataset.value || "";
  var value = elem.value;
  var n = Number(value);
  if (value == '-' || (!isNaN(n) && n <= 9999 && n >= -9999 && n % 1 == 0)) {
    elem.dataset.value = n;
    elem.value = n
    return true;
  } else {
    elem.value = oldValue;
    return false;
  }
}

<input id="f" type="text" onkeyup="return f(this);">

Answer 2

Другой вариант:

document.querySelector("input").addEventListener("keypress", function(e) {
  let v = this.value;
  let future_val = v.slice(0, this.selectionStart) + e.key + v.slice(this.selectionEnd);
  
  if (!/^-?\d{0,4}$/.test(future_val)) e.preventDefault();
});

<input>

Если ничего не выделено, .selectionStart и .selectionEnd - одно и то же число: позиция каретки. Соответственно, разделив строку на "до каретки" и "после", добавив между ними значение нажатой кнопки, можно проверить будущее значение инпута.

(Называется «Регулярные выражения»)
^ — начало строки, -? необязательный минус, \d{0,4} от 0 до 4 цифр, $ - конец строки.
Если тест не будет пройден (вернет false), !false станет true и символ не напечатается.

P.s. Вариант Игоря надежнее, потому что обрабатывает неверный ввод через copy-paste.

БЛОГ НА HUSL

Как в input c JS задать, чтобы принимались только + числа и -

Ответы (2 шт):