Подтвердить что ты не робот

Как узнать, является ли .keyup() символьным ключом (jQuery)

Как узнать, является ли .keyup() символьным ключом (jQuery)

$("input").keyup(function() {

if (key is a character) { //such as a b A b c 5 3 2 $ # ^ ! ^ * # ...etc not enter key or shift or Esc or space ...etc
/* Do stuff */
}

});
4b9b3361

Ответ 1

Примечание. В ретроспективе это был быстрый и грязный ответ, который может работать не во всех ситуациях. Чтобы получить надежное решение, см. ответ тим Дауна (скопируйте его здесь, поскольку этот ответ по-прежнему получает мнения и отзывы):

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

Следующий пример будет работать все время в большинстве браузеров, но Есть некоторые крайние случаи, о которых вы должны знать. Для чего в мой взгляд, полное руководство по этому вопросу, см. http://unixpapa.com/js/key.html.

$("input").keypress(function(e) {
    if (e.which !== 0) {
        alert("Character was typed. It was: " + String.fromCharCode(e.which));
    }
});

keyup и keydown дают вам информацию о физическом ключе, который был нажат. На стандартных клавиатурах США/Великобритании в их стандартных раскладках это похоже, что есть корреляция между свойством keyCode эти события и характер, который они представляют. Однако это не надежно: разные раскладки клавиатуры будут иметь разные сопоставления.


Ниже приведен первоначальный ответ, но он не является правильным и может работать не надежно во всех ситуациях.

Чтобы сопоставить код клавиши с символом слова (например, a будет соответствовать. space не будет)

$("input").keyup(function(event)
{ 
    var c= String.fromCharCode(event.keyCode);
    var isWordcharacter = c.match(/\w/);
}); 

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

Ответ 2

Вы не можете сделать это надежно с событием keyup. Если вы хотите узнать что-то о введенном символе, вы должны использовать событие keypress.

Следующий пример будет работать все время в большинстве браузеров, но есть некоторые крайние случаи, о которых вы должны знать. Для того, что, на мой взгляд, является окончательным руководством по этому вопросу, см. http://unixpapa.com/js/key.html.

$("input").keypress(function(e) {
    if (e.which !== 0) {
        alert("Charcter was typed. It was: " + String.fromCharCode(e.which));
    }
});

keyup и keydown предоставляют информацию о физическом нажатии клавиши. На стандартных клавиатурах США/Великобритании в стандартных макетах, похоже, существует корреляция между свойством keyCode этих событий и характером, который они представляют. Однако это ненадежно: разные раскладки клавиатуры будут иметь разные сопоставления.

Ответ 3

Я не совсем удовлетворен другими ответами. У них у всех есть какой-то недостаток.

Использование keyPress с event.which ненадежно, потому что вы не можете поймать возврат или удаление (как упомянуто Тарлом). Использование keyDown (как в ответах Niva и Tarl) немного лучше, но решение имеет недостатки, поскольку оно пытается использовать event.keyCode с String.fromCharCode() (keyCode и charCode не совпадают!).

Однако то, что мы ДЕЛАЕМ с событием keydown или keyup, является фактической нажатой клавишей (event.key). Насколько я могу судить, любой key длиной 1 является символом (цифрой или буквой) независимо от того, какую языковую клавиатуру вы используете. Пожалуйста, поправьте меня, если это не так!

Тогда этот очень длинный ответ из asdf. Это может сработать отлично, но это кажется излишним.


Итак, вот простое решение, которое будет ловить все символы, возвращать и удалять. (Примечание: здесь keyup или keydown будут работать, но keypress не будет)

$("input").keydown(function(event) {

    var isWordCharacter = event.key.length === 1;
    var isBackspaceOrDelete = event.keyCode === 8 || event.keyCode === 46;

    if (isWordCharacter || isBackspaceOrDelete) {
        // do something
    }
});

Ответ 4

Это помогло мне:

$("#input").keyup(function(event) {
        //use keyup instead keypress because:
        //- keypress will not work on backspace and delete
        //- keypress is called before the character is added to the textfield (at least in google chrome) 
        var searchText = $.trim($("#input").val());

        var c= String.fromCharCode(event.keyCode);
        var isWordCharacter = c.match(/\w/);
        var isBackspaceOrDelete = (event.keyCode == 8 || event.keyCode == 46);

        // trigger only on word characters, backspace or delete and an entry size of at least 3 characters
        if((isWordCharacter || isBackspaceOrDelete) && searchText.length > 2)
        { ...

Ответ 5

Если вам нужно только исключить ключи enter, escape и spacebar, вы можете сделать следующее:

$("#text1").keyup(function(event) {
if (event.keyCode != '13' && event.keyCode != '27' && event.keyCode != '32') {
     alert('test');
   }
});

Посмотрите здесь действия.

Вы можете сослаться на полный список кодов клавиш здесь для дальнейшей модификации.

Ответ 6

Я хотел сделать именно это, и я подумал о решении, включающем как keyup, так и нажатие.

(Я не тестировал его во всех браузерах, но я использовал информацию, собранную в http://unixpapa.com/js/key.html)

Изменить: переписал его как плагин jQuery.

(function($) {
    $.fn.normalkeypress = function(onNormal, onSpecial) {
        this.bind('keydown keypress keyup', (function() {
            var keyDown = {}, // keep track of which buttons have been pressed
                lastKeyDown;
            return function(event) {
                if (event.type == 'keydown') {
                    keyDown[lastKeyDown = event.keyCode] = false;
                    return;
                }
                if (event.type == 'keypress') {
                    keyDown[lastKeyDown] = event; // this keydown also triggered a keypress
                    return;
                }

                // 'keyup' event
                var keyPress = keyDown[event.keyCode];
                if ( keyPress &&
                     ( ( ( keyPress.which >= 32 // not a control character
                           //|| keyPress.which == 8  || // \b
                           //|| keyPress.which == 9  || // \t
                           //|| keyPress.which == 10 || // \n
                           //|| keyPress.which == 13    // \r
                           ) &&
                         !( keyPress.which >= 63232 && keyPress.which <= 63247 ) && // not special character in WebKit < 525
                         !( keyPress.which == 63273 )                            && //
                         !( keyPress.which >= 63275 && keyPress.which <= 63277 ) && //
                         !( keyPress.which === event.keyCode && // not End / Home / Insert / Delete (i.e. in Opera < 10.50)
                            ( keyPress.which == 35  || // End
                              keyPress.which == 36  || // Home
                              keyPress.which == 45  || // Insert
                              keyPress.which == 46  || // Delete
                              keyPress.which == 144    // Num Lock
                              )
                            )
                         ) ||
                       keyPress.which === undefined // normal character in IE < 9.0
                       ) &&
                     keyPress.charCode !== 0 // not special character in Konqueror 4.3
                     ) {

                    // Normal character
                    if (onNormal) onNormal.call(this, keyPress, event);
                } else {
                    // Special character
                    if (onSpecial) onSpecial.call(this, event);
                }
                delete keyDown[event.keyCode];
            };
        })());
    };
})(jQuery);

Ответ 7

Мне никогда не нравилась проверка кода ключа. Мой подход состоял в том, чтобы увидеть, есть ли на вводе текст (любой символ), подтверждающий, что пользователь вводит текст, а не другие символы

$('#input').on('keyup', function() {
    var words = $(this).val();
    // if input is empty, remove the word count data and return
    if(!words.length) {
        $(this).removeData('wcount');
        return true;
    }
    // if word count data equals the count of the input, return
    if(typeof $(this).data('wcount') !== "undefined" && ($(this).data('wcount') == words.length)){
        return true;
    }
    // update or initialize the word count data
    $(this).data('wcount', words.length);
    console.log('user tiped ' + words);
    // do you stuff...
});
<html lang="en">
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
  <input type="text" name="input" id="input">
  </body>
</html>