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

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

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

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

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

+46
13 нояб. '13 в 23:14
источник поделиться
7 ответов

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

document.querySelector("input").addEventListener("keypress", function (evt) {
    if (evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});
+57
13 нояб. '13 в 23:30
источник

Это можно сделать, предотвратив появление события 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 для перезагрузки и т.д.

+21
04 дек. '14 в 16:43
источник

Связанные вопросы


Похожие вопросы

Обратите внимание, что 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....

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

+11
15 мар. '17 в 9:54
источник

Это решение, кажется, работает хорошо для меня. Он основан на решении @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();
  }
});
+3
11 апр. '18 в 16:38
источник
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();
  }
}

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

+2
03 июн. '17 в 20:11
источник

Я также добавлю 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))

0
04 апр. '19 в 18:59
источник

Попробуйте:

document.querySelector("input").addEventListener("keyup", function () {
   this.value = this.value.replace(/\D/, "")
});
-2
13 нояб. '13 в 23:26
источник

Посмотрите другие вопросы по меткам или Задайте вопрос