Разрешить только отрицательный знак в качестве первого символа в поле ввода типа «число»

Question

Есть ли способ разрешить только отрицательный знак (или дефис) для первого символа во входном теге типа «число»? Это должен быть тип «номер», чтобы на мобильном телефоне отображалась правильная клавиатура. Тем не менее, пользователь может ввести несколько отрицательных знаков, прежде чем нажать «Отправить». Я использовал .checkValidity(), что помогает, но предотвращает ввод отрицательного знака, если я сначала не наберу число. Я не могу проверить с помощью .value, так как это возвращает пустое значение, если оно недействительно.

HTML

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

JavaScript

var input = document.querySelector('#input');
var value;

input.oninput = function() { 
    if (input.checkValidity()) {
        value = input.value;
    }
    else{
        input.value = value;
    }
}

Любая помощь приветствуется. Спасибо!

Answer 1

Атрибут pattern HTML довольно хорошо поддерживается в наши дни, поэтому вы можете использовать его для этой проверки.

Попробуйте поиграть с Форма во фрагменте ниже - если значение не является числом, появится всплывающая подсказка, и форма не будет отправлена. Нет JS.

<form action="#">
  <input type="number" id="input" pattern="^-?\d+$">
  <input type="submit">
</form>

Чтобы проверить, когда пользователь вводит данные, вам потребуется JS:

input:invalid {background:#f009}

<form action="#">
  <input type="number" id="input" pattern="^-?\d+$" oninput="this.checkValidity()">
  <input type="submit">
</form>

Answer 2

Используйте пользовательское регулярное выражение для проверки ввода. В начале будет разрешен только один дефис.

/^[-0-9][0-9]+$/.test(input)

Таким образом, блок кода может быть

input.oninput = function() { 
  if (/^[-0-9][0-9]+$/.test(input.value)) {
      value = input.value;
  }
  else{
      input.value = value;
  }
}

Я не проверял, но думаю, что это поможет.

Answer 3

Вы можете использовать регулярное выражение, которое не совпадает ни с чем, кроме цифр, затем проверить совпадения и соответственно установить входное значение на входе.

const el = document.querySelector('#myInput');
el.value = '-';

el.addEventListener('input', e => {
  const m = e.target.value.match(/\d+/g);
  el.value = m === null ? '-' : `-${m}`;
});

<input id="myInput" type="text" />

Answer 4

Попробуйте:

<input type="number" id="input" oninput="this.value.match(/^-?\d*\.?\d*$/)||(this.value='');">