Как предотвратить ввод номера при нажатии клавиши?

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

  • e.target.value бесполезен, так как значение ключа еще не проецируется в целевое значение
  • e.keyCode для номера зависит от типа клавиатуры, языковой раскладки, клавиши Fn или Shift
  • String.fromCharCode(e.keyCode) не надежен, по крайней мере, на моей клавиатуре (чешская qwerty)
  • спецификация w3 говорит e.keyCode является устаревшим атрибутом и вместо него предлагает e.char, но он еще не реализован в браузерах

Так как же поймать ввод числа до того, как оно появится в текстовом поле?


javascript keyboard-events cross-browser
person Jan Turoň    schedule 31.03.2013    source источник

Ответы (3)


arrow_upward
26
arrow_downward

Вместо этого используйте событие keypress. Это единственное ключевое событие, которое даст вам информацию о введенном символе через свойство which в большинстве браузеров и (как ни странно) свойство keyCode в IE. Используя это, вы можете условно подавить событие keypress на основе введенного символа. Однако это не поможет вам предотвратить вставку или перетаскивание пользователем текста, содержащего числовые символы, поэтому вам все равно потребуется какая-то дополнительная проверка.

Мой любимый справочник по ключевым событиям JavaScript: http://unixpapa.com/js/key.html.

textBox.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
    var charStr = String.fromCharCode(charCode);
    if (/\d/.test(charStr)) {
        return false;
    }
};
person Tim Down    schedule 31.03.2013
comment
Невероятный! Иногда e.keyCode отличается в событиях keypress и keydown! По крайней мере, в моем последнем Chrome. Это фича или баг? - person Jan Turoň; 31.03.2013
comment
@JanTuroň: Согласно unixpapa.com/js/key.html, в WebKit keyCode является то же, что и which в событиях keypress, что может легко отличаться от keyCode в событии keydown (для начала подумайте о прописных и строчных буквах: один и тот же код клавиши, разные коды символов). - person Tim Down; 31.03.2013
comment
@JanTuroň: Между прочим, ваше редактирование было неправильным, поэтому я откатил его. Вам нужно использовать e.returnValue только в старом IE, и даже не в обработчиках DOM0, как в моем примере. - person Tim Down; 31.03.2013

arrow_upward
15
arrow_downward

Попробуйте это, чтобы заменить целочисленные значения:

<input onkeydown="Check(this);" onkeyup="Check(this);"/>

<script>
function Check(me) {
    me.value = me.value.replace(/[0-9]/g, "");
}
</script>

Чтобы предотвратить целочисленный ввод:

<input onkeydown="Check(event);" onkeyup="Check(event);"/>

<script>
function Check(e) {
    var keyCode = (e.keyCode ? e.keyCode : e.which);
    if (keyCode > 47 && keyCode < 58) {
        e.preventDefault();
    }
}
</script>
person palaѕн    schedule 31.03.2013
comment
Частично см. второй и третий пункт в моем вопросе: ввод числа в числовой части клавиатуры находится в диапазоне от 96 до 105, он не возвращает число в String.fromCharCode, а также может варьироваться в зависимости от раскладки клавиатуры и переключения клавиш. - person Jan Turoň; 31.03.2013

arrow_upward
0
arrow_downward

Мое решение для предотвращения плавающих кодовых символов

    // 'left arrow', 'up arrow', 'right arrow', 'down arrow',
    const = arrowsKeyCodes: [37, 38, 39, 40],
    // 'numpad 0', 'numpad 1',  'numpad 2', 'numpad 3', 'numpad 4', 'numpad 5', 'numpad 6', 'numpad 7', 'numpad 8', 'numpad 9'
    const = numPadNumberKeyCodes: [96, 97, 98, 99, 100, 101, 102, 103, 104, 105],

    export const preventFloatingPointNumber = e => {
    // allow only [0-9] number, numpad number, arrow,  BackSpace, Tab
    if ((e.keyCode < 48 && !arrowsKeyCodes.includes(e.keyCode) || e.keyCode > 57 &&
        !numPadNumberKeyCodes.includes(e.keyCode)) &&
        !(e.keyCode === 8 || e.keyCode === 9))
        e.preventDefault()
    }
person Palaniichuk Dmytro    schedule 27.03.2019