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

Question

Как узнать, является ли ключ .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 */
}

});

Answer 1

Вы не можете сделать это надежно с событием 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 этих событий и символом, который они представляют.Однако это ненадежно: разные раскладки клавиатуры будут иметь разные сопоставления.

Answer 2

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

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

Следующий пример будет работать все время в большинстве браузеров, но есть некоторые крайние случаи, о которых вам следует знатьиз.Что, на мой взгляд, является полным руководством по этому вопросу, см. 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 этих событий и символом, который они представляют.Однако это ненадежно: разные раскладки клавиатуры будут иметь разные сопоставления.

---

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

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

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

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

Answer 3

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

$("#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)
        { ...

Answer 4

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

Использование keyPress с event.which ненадежно, потому что вы не можете поймать возврат или удаление (как упомянуто Тарлом).Использование keyDown (как в ответах Нивы и Тарла) немного лучше, но решение имеет недостатки, поскольку оно пытается использовать 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
    }
});

Answer 5

Я хотел сделать именно это и подумал о решении, включающем и 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);

Answer 6

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

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

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

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

Answer 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>