Надежный способ получить значение keyEvent для "всех" браузеров, включая Mobile

Question

Я пытаюсь получить значение keyPressed в любом keyPress, keydown, или же keyUp событие. Различные решения здесь хорошо работают на Chrome, FireFox, IE и т. Д. Однако они не работают на устройствах Android.

Я попробовал несколько решений, вдохновленных следующим SO:

• Получить значение символа из KeyCode в JavaScript... затем обрезать
• Как преобразовать код ключа в символ с помощью JavaScript
• как получить строковое / символьное значение из кода ключа;

Первое решение:

element.keydown(function (e) { 
    var keyCode = e.charCode || e.keyCode || e.which;
    var digit = String.fromCharCode(keyCode);

    // here digit is "å" on android using danish locale
}

KeyUp дает тот же результат. KeyPressed не будет работать на Chrome на Android.

Для воспроизведения я сделал plunkr, который показывает поведение:

https://plnkr.co/BVUfiJrBr0RBPDst9izD/

Он отлично работает на рабочем столе, но код ключа всегда 229 в браузерах Android, независимо от нажатой клавиши.

Я воспроизвел ошибку на:

• Samsung Galaxy S6, Android 5.1.1, браузер: Chrome 48.0.2564.95
• Sony Experia Z2, Android 5.1.1, браузер: Chrome 48.0.2564.95

Это работает на:

• Samsung Galaxy S6, Android 5.1.1, браузер: Firefox
• iphone

Попытка воспроизвести ошибку указывает на ошибку в Chrome. Есть ли другой способ обойти эту проблему?

Answer 1

Вы пытались использовать input событие? Однажды столкнулся с подобной проблемой, и это помогло мне вернуться назад с Android 4.4 (Работал в FF, Chrome и родном браузере Android).

Сделал небольшой пример скрипки. Надеюсь это поможет!

Answer 2

Я просто должен был решить это сам. В моем случае этот элемент является элементом ввода текста. На событии keyup (которое запускается во всех браузерах) я размываю ввод. Теперь все, что было введено, доступно в input.val(), и происходит событие изменения. Поэтому я добавляю функцию к событию изменения на входе, которая собирает то, что было введено, и возвращает фокус на вход. В моем случае мне нужно было получить только одного персонажа. Я не проверял это в ситуации, когда кто-то печатает быстро, и браузер должен выполнять все это между быстрыми нажатиями клавиш.

Мой код выглядит так:

$('input').on( 'keyup', function(){
    $(this).blur();
});
$('input').on( 'change', function(){
    // my code to do what I want with the value that was entered,
    // which thanks to the blur() I can get from input.val()
    $(this).focus(); // return focus to the input so the user can continue
});

Может это поможет?