Проверка ввода ключа в поле с помощью javascript

я использую

document.getElementById('input-field').addEventListener('keyup', function (e) {
  if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
    event.preventDefault();
  }
});

Это почти работает. Проблема в том, что я не могу использовать ключевые стрелки, backspace, delete, ctrl + a и т. Д.

Как я могу ограничить его только теми ключами, которые будут давать строковое представление в конкретном входе?

javascript,html,regex,validation,

2

Ответов: 2

1 принят

Чтобы игнорировать эти ключи, вам необходимо добавить условие перед проверкой ввода.

Например, вы можете создать массив, содержащий список всех KeyCodes, которые вы хотите игнорировать, и просто проверить, не является ли введенный ключ одним из них.

Вот что вам нужно:

document.getElementById('input-field').addEventListener('keypress', function(e) {
  //An array of special Keys
  var specialKeys = [37, 38, 39, 40, 8, 13, 27, 46];
  if (specialKeys.indexOf(e.which) === -1) {
    console.log(String.fromCharCode(e.which)+ ' Key is validated!');
    if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
      event.preventDefault();
    }
  }
});
<input type="text" id="input-field" placeholder="input text here">

Заметка:

Как уже упоминалось в комментариях, вам нужно использовать keypressсобытие вместо того, keyupчтобы немедленно проверять каждый введенный символ.

0

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

Вы можете добиться этого, используя решение, предложенное @TimDown, как определить, будет ли нажатый ключ выдавать символ внутри <input>текстового поля? применяется к keypressсобытию, как вы можете видеть в приведенном ниже коде. Итак, вы можете работать только с ключевыми событиями для печати.

    function isCharacterKeyPress(evt) {
        if (typeof evt.which == "undefined") {
            // This is IE, which only fires keypress events for printable keys
            return true;
        } else if (typeof evt.which == "number" && evt.which > 0) {
            // In other browsers except old versions of WebKit, evt.which is
            // only greater than zero if the keypress is a printable key.
            // We need to filter out backspace and ctrl/alt/meta key combinations
            return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
        }
        return false;
    }

    document.getElementById('input-field').addEventListener('keypress', function (e) {
        if(isCharacterKeyPress(e)){
            if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
                e.preventDefault();
            }
        }
    });
<input type="text" id="input-field" placeholder="input text here">

JavaScript, HTML, регулярное выражение, проверка,
Похожие вопросы
Яндекс.Метрика