Кросс-браузер получить код ключа

Question

Я пытаюсь получить кросс-браузерный способ прослушивания keyCode пользователя keyDown,

Для мобильных браузеров мне нужно активировать виртуальную клавиатуру, поэтому я использую ввод, скрытый css, запускаемый с помощью click событие. Это работает хорошо, за исключением того, что, когда я пытаюсь прослушать код ключа на fennec (мобильный Firefox), у меня странное поведение.

Вот функция, которую я использую, чтобы слушать keycode,

document.querySelectorAll('input')[0].addEventListener('keydown', handler);

function handler(e) {
  e.preventDefault();
  var k = (e.which) ? e.which : e.keyCode;
  document.getElementById('log').innerHTML = k;
  this.style.backgroundColor = "#FFAAFF";
}

<input type="text" />
<span id="log"></span>

• В Firefox для Android (с v34 по v37) он не сработает, пока пользователь не введет return ⏎.
  На самом деле, я обнаружил, что если значение ввода не пусто, оно работает хорошо, по крайней мере, при загрузке. Поэтому я подумал об обходном пути, подобном этому: if(this.value=='')this.value='*'; Кажется, работает, но если вы спамите, Backspace sp не блокируется, поэтому, когда ввод очищен, ошибка возвращается: обходной путь также не срабатывает.
  + Это уродливый обходной путь, который, я уверен, создаст другие ошибки в других браузерах.
  

     
     document.querySelectorAll('input')[0].addEventListener('keydown', handler);
     
     function handler(e) {
       if(this.value=='')this.value='*';
       e.preventDefault();
       var k = (e.which) ? e.which : e.keyCode;
       document.getElementById('log').innerHTML = k;
       this.style.backgroundColor = "#FFAAFF";
     }
     
     

     
     <input type="text" value="*"/>
     <span id="log"></span>
     
     

• В B2G (Firefox Os 1.3 на устройстве или в эмуляции 2.0) поведение еще более странное:
  функция только читает keyCode для возврата ⌫ (код клавиши 8) или вернуть ⏎ (keyCode 13) ключи. Любой другой ключ вернется 0,

Итак, мой вопрос, знаете ли вы лучший кросс-браузерный способ слушать keyCode Один работает во всех основных браузерах, настольных или мобильных, и на fennec?

PS: даже если я напишу свое приложение на vanilla-js, я смогу найти решение для любой библиотеки.

Answer 1

Не существует идеального решения для прослушивания KeyCode в разных браузерах и ОС... Просто потому, что в javascript используются те же коды клавиш, которые сообщаются операционной системой, в которой он работает. Вам будет лучше использовать input событие вместо keyDown

По данным этого сайта input событие происходит, когда текстовое содержимое элемента изменяется через пользовательский интерфейс, что вам и нужно, потому что в некоторых мобильных браузерах / ОС события не запускаются до тех пор, пока пользователь не введет ввод, а change событие пожары.

$(document).ready(function () {
    var inputEvent = 'oninput' in window ? 'input' : 'keyup';
    $('#listen').on(inputEvent, function (event) {
        $('#show').val($('#show').val() + '\n' + event.type);
        console.log('--- input event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |---> ' + event[v]);
            }
        }
    })
    //just added to see what Silk listens for on the keyup event
    $('#listen').on('keyup', function (event) {
        $('#show').val($('#show').val() + '\n' + event.type + ' | which --> ' + event.which);
        console.log('--- keyup event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |-.-> ' + event[v]);
            }
        }
    })
});

input {
    font-size: 22px
}
input, textarea {
    width:300px;
}
textarea {
    height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <input type='text' id="listen" />
    <br/>
    <br/>
    <textarea type='text' id="show"></textarea>
</div>