숫자 전용 자바 스크립트 파이어 폭스 솔루션

Question

Firefox에서 자주 발생하는 바닐라 자바 ​​스크립트 코드를 정리하는 데 도움이 필요합니다.

다음/keyCode 검사는 input 또는 textarea에 숫자 만 허용하는 가장 일반적인 바닐라 JS 솔루션에 대한 것 같습니다.

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

태그로 onkeypress="return function(event);"을 통해 호출됩니다.

그러나 Firefox는 다른 브라우저처럼 onkeyup 및 onkeydown이 아닌 onkeypress 호출로 화살표 키를 바인딩합니다. 이는 예를 들어 왼쪽 화살표 키 charCode은 37이지만 % (shift + 5)는 charCode입니다. 더 중요한 것은 화살표 키를 탐색 (캐럿/텍스트 커서를 왼쪽이나 오른쪽으로 이동)에 사용할 수 없다는 것입니다.

그러나, 차이 (http://www.asquare.net/javascript/tests/KeyCode.html에 도시 된 바와 같이) %가 charCode 및 37의 which있는 동안 왼쪽 화살표 키, keyCode 37을 갖는다는 것이다. 그래서 다음을 수행하여 화살표 키가 잘 작동 할 수 있었다 그러나

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

, 내가 그것을 할 수있는 최선의 또는 깨끗한 방법은 아니며, 더 키가 다르게 처리가 될 수 있음을 느낌 파이어 폭스는 화살표 키보다 더 깨끗한 바닐라 JS 솔루션 또는이 기능 내에서 화살표 키를 최소한으로 확인하는 방법은 무엇입니까?

감사합니다.

---

편집 : 난 그냥 코드가 파이어 폭스를 해결하더라도 이들 지금 charCodes 37-40 (즉, %)을 입력 할 수 있습니다, 그것은 다른 모든 브라우저에 대한 새로운 문제를 도입한다는 생각. keyCode을 확인하는 대신 charCode 또는 which을 확인해야합니다. 그렇지 않은 경우 동일한 방법으로 확인하십시오.

Answer 1

사용자 경험을 저하시키는 느낌이 들기 때문에 특정 키를 차단하지 말 것을 권합니다. 그러나 이것이 당신이 필요로하는 것이라면, keyCode 속성에 의존하지 말 것을 제안합니다. 뿐만 아니라 이와 관련된 호환성 문제, 또한이 입력은 마우스와 상황에 맞는 메뉴와 같이 할 수있는 모든 방법을 포함하고, deprecated하지 않습니다됩니다

이 기능은 웹 표준에서 제거되었습니다.

는 KeyboardEvent.keyCode 판독 전용 속성

대신 I는 입력 값에 대한 모든 변화를 트리거 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">