Только для номера JavaScript-решение для Firefox

Question

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

Следующий, который/keyCode проверяет, похоже, на самое популярное решение VanS JS, чтобы разрешить только номера в input или textarea.

var charCode = (e.which) ? e.which : e.keyCode; 
if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
return false; 
} 
return true; 

Вызывается с помощью onkeypress="return function(event);" по тегу.

Тем не менее, Firefox, по-видимому, связывает клавиши со стрелками с номерами onkeypress, а не только onkeyup и onkeydown, как и другие браузеры. Это означает, что, например, клавиша левой клавиши charCode - 37, но также и charCode для% (shift + 5). Что еще более важно, это означает, что клавиши со стрелками нельзя использовать для навигации (перемещение курсора/текста курсора влево или вправо).

Однако разница в том, что левая клавиша стрелка имеет keyCode 37, в то время как% имеет charCode и which из 37 (как показано на http://www.asquare.net/javascript/tests/KeyCode.html). Так что я был в состоянии сделать клавиши со стрелками работают нормально, выполнив следующие действия:

if (charcode > 31 && (charcode < 48 || charcode > 57)) { 
if (e.keycode && e.keyCode > 36 && e.keyCode < 41) { 
    return true; 
} 
    return false; 
} 
return true; 

Однако, я чувствую, что это не самый лучший и чистый способ сделать это, и что там может быть несколько ключей обрабатываются по-разному Firefox, а не только клавиши со стрелками. Что было бы более чистым решением для решения проблемы с Vanilla JS или способом проверки по меньшей мере клавиш со стрелками в этой функции?

Большое спасибо!

---

EDIT: Я просто понял, что даже если код решает его для Firefox, он вводит новую проблему для всех остальных браузеров, в том, что они позволяют теперь charCodes 37-40 (т.е.%), которые будут введены. Кажется, что вместо проверки keyCode ему необходимо было бы проверить charCode или which, иначе таким же образом.

Answer 1

Я бы посоветовал не блокировать определенные ключи, поскольку я чувствую, что это ухудшает работу пользователя. Но, учитывая, что это то, что вам нужно, я бы предложил не полагаться на свойство keyCode. Мало того, есть проблемы совместимости, связанные с ним, он также не охватывает все способы ввода могут быть сделаны, как с помощью меню мыши и контекста, и deprecated:

Эта функция была удалена из веб-стандартов.

KeyboardEvent.keyCode свойства только для чтения представляет собой систему и зависят от реализации числовой код

Вместо этого я предлагаю использовать input событие, которое вызывает при каждом изменении входного значения, а затем очистить значение без цифр, помещая курсор в то место, где был найден первый оскорбительный символ. Это дает примерно такой же пользовательский опыт, и имеет не плохое влияние на то, как клавиши со стрелками, забой, удаление, выбор, ... и т.д. работы:

document.querySelector('#num').addEventListener('input', function() { 
 
    var badCharPos = this.value.search(/\D/); 
 
    if (badCharPos == -1) return; // all OK 
 
    // remove offending characters: 
 
    this.value = this.value.replace(/\D/g, ''); 
 
    this.setSelectionRange(badCharPos, badCharPos); 
 
});

<input id="num">