Предотвращение ввода нечислового номера типа ввода

Использование <input type=number> приведет к тому, что this.value внутри прослушивателя событий вернет пустую строку, если вход не является допустимым числом. Вы можете увидеть пример этого в http://jsfiddle.net/fSy53/

Однако недопустимые символы все еще отображаются на входе.

Есть ли способ получить фактически отображаемое значение, включая недопустимые символы, из прослушивателя событий?

Моя конечная цель - не допустить, чтобы пользователи фактически вводили в поле какие-либо нечисловые символы. Мне нужно использовать type=number, чтобы цифровая виртуальная клавиатура использовалась мобильными устройствами. Моя цель состояла бы в том, чтобы сделать что-то вроде this.value = this.value.replace(/[^0-9.]/g, "") на keyup keypress, но это не сработает, потому что, если введен неверный символ, чтение из this.value возвращает "".

ОТВЕТЫ

Ответ 1

Попробуйте предотвратить поведение по умолчанию, если вам не нравится значение входящего ключа:

document.querySelector("input").addEventListener("keypress", function (evt) {
    if (evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

Ответ 2

Это можно сделать, предотвратив появление события keyPress для нечисловых значений

например (с помощью jQuery)

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

Это учитывает все различные типы ввода (например, ввод с цифровой клавиатуры имеет разные коды, чем клавиатура), а также обратное пространство, клавиши со стрелками, управление /cmd + r для перезагрузки и т.д.

Ответ 3

Обратите внимание, что e.which, e.keyCode и e.charCode не рекомендуется использовать: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

Я предпочитаю e.key:

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

Эта функция не влияет на управляющие коды в Firefox (Backspace, Tab и т.д.), e.key.length === 1 длину строки: e.key.length === 1.

Это также предотвращает дублирование точек в начале и между цифрами: e.key === '.' && contains(e.target.value, '.') e.key === '.' && contains(e.target.value, '.')

К сожалению, это не мешает нескольким точкам в конце: 234....

Кажется, с этим не справиться.

Ответ 4

Это решение, кажется, работает хорошо для меня. Он основан на решении @pavok, сохранив команды клавиш Ctrl.

document.querySelector("input").addEventListener("keypress", function (e) {
  if (
    e.key.length === 1 && e.key !== '.' && isNaN(e.key) && !e.ctrlKey || 
    e.key === '.' && e.target.value.toString().indexOf('.') > -1
  ) {
    e.preventDefault();
  }
});

Ответ 5

inputs[5].addEventListener('keydown', enterNumbers);

function enterNumbers(event) {
  if ((event.code == 'ArrowLeft') || (event.code == 'ArrowRight') ||
     (event.code == 'ArrowUp') || (event.code == 'ArrowDown') || 
     (event.code == 'Delete') || (event.code == 'Backspace')) {
     return;
  } else if (event.key.search(/\d/) == -1) {
    event.preventDefault();
  }
}

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

Ответ 6

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

function allowOnlyNumbers(event) {
  if (event.key.length === 1 && /\D/.test(event.key)) {
    event.preventDefault();
  }
}

Это не приведет к изменению поведения клавиш со стрелками, клавишами ввода, сдвига, Ctrl или Tab, поскольку длина свойства ключа для этих событий превышает один символ. Он также использует простые регулярные выражения для поиска любого нецифрового символа.

Ответ 7

Я также добавлю MetaKey, так как использую MacOS

input.addEventListener("keypress", (e) => {
    const key = e.key;
    if (!(e.metaKey || e.ctrlKey) && key.length === 1 && !/\d\./.test(key)) {
        e.preventDefault();
    }
}

Или вы можете попробовать !isNaN(parseFloat(key))

Ответ 8

Обновленная информация о принятом ответе:

Из-за того, что многие свойства устарели

(property) KeyboardEvent.which: number @deprecated

вам просто нужно полагаться на свойство ключа и самостоятельно создавать остальную логику:

Код разрешает ввод, Backspace и все цифры [0-9], все остальные символы запрещены.

document.querySelector("input").addEventListener("keypress", (e) => {
  if (isNaN(parseInt(e.key, 10)) && e.key !== "Backspace" && e.key !== "Enter") {
      e.preventDefault();
    }
});

ПРИМЕЧАНИЕ Это отключит действие вставки

Ответ 9

Попробуйте:

document.querySelector("input").addEventListener("keyup", function () {
   this.value = this.value.replace(/\D/, "")
});