JavaScript: контроль ввода в keydown событии

Question

JavaScript: контроль ввода в keydown событии

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

Проверка, которую я пишу, похожа на это,

function validateUserInput(){
   var code = this.event.keyCode;
    if ((code<48||code>57) // numerical
      &&code!==46 //delete
      &&code!==8  //back space
      &&code!==37 // <- arrow 
      &&code!==39) // -> arrow
   {
     this.event.preventDefault();        
    }
}

Я могу продолжать идти как это, однако я вижу недостатки на этой реализации. Это, например:

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

Но функция, которую я не хочу терять, не должна отображать вход в textarea если это не передает проверку. (В случае, если пользовательская попытка вставить запрещенные символы textarea, ничто не должно появляться вообще), Именно поэтому, я не делаю проверки на keyup событие.

Таким образом, мой вопрос:

Есть ли лучшие способы проверить вход в keydown событие, чем проверка keyCode keyCode?
Есть ли другие способы получить вводы данных пользователем кроме keydown событие перед браузером отображает его? И способ поместить проверку на него?

Спасибо за справку заранее.

6

javascript javascript-events validation keydown

задан Jonatas Walker 24 November 2015 в 21:45

2 ответа

Я не думаю, что вам нужна часть preventDefault. Если вы хотите перехватить клавиши (по event.keyCode, или комбинации, например, event.ctrlKey + event.keyCode), вы проверяете, разрешен ли keyCode. Если да, то просто возвращаете true, иначе возвращаете false. Если вы вернете false, то введенный ключ не будет записан в поле ввода, иначе - будет.

Я не могу придумать лучшего способа, чем использование keyCode. Вы можете использовать String.fromCharCode([keyCode]), если хотите проверить определенные значения символов, но это все время сводится к некоторому циклу для проверки ключевых кодов, которые вы хотите проверить. Возможно, switch ... case мог бы предложить немного больше читабельности.

Вот кусок кода из обработчика события нажатия клавиши, который я использую (просто для демонстрации, на самом деле он ничего не делает):

function handleKey(e, thisFld) {
        thisFld = (thisFld || this);
              e = e || event;
    if (!e) {
      return true;
    }

    var isCtrl = e.ctrlKey,
        isShift = e.shiftKey,
        isAlt = e.altKey,
        kc = e.keyCode || e.which,
        codes = [27, 38, 40],
        keys = {
                 escape: 27,
                 up: 38,
                 down: 40,
                 ins: 45,
                 del: 46,
                 one: 49
                };

    if (isCtrl && kc === keys.del) { ... }
    if (isAlt && kc === keys.ins) { ... }
        //etc
    return true;
}

1

ответ дан 8 December 2019 в 15:59

Другие вопросы по тегам:

javascript javascript-events validation keydown

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

score 14 · Accepted Answer

Если вы проверяете печатаемую клавишу, а это именно то, что вы, кажется, делаете, вам следует вместо этого использовать событие keypress , поскольку это единственное место, где вы ' Вы сможете получить достоверную информацию о символе, который представляет собой нажатие клавиши. Вы не можете надежно обнаружить числовые нажатия клавиш в событии keydown . Кроме того, отключать клавиши со стрелками и клавиши удаления / возврата - плохая идея. Что вы получите от этого?

Также есть некоторые ошибки: в Firefox вам нужно получить объект Event из параметра, переданного в функцию обработчика событий, и если вы используете функция обработчика событий DOM0, а не addEventListener () или attachEvent () , вы должны использовать return false; для подавления поведения по умолчанию. Вот мой рекомендуемый код:

var input = document.getElementById("your_input_id");

input.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (/\d/.test(charStr)) {
        return false;
    }
};