addEventListener를 통해 false를 반환하지 않는 숫자 입력 만 허용하는 함수

Question

외부 JS- 파일에서 사용자가 숫자 입력을 사용하지 못하게하는 다음 코드가 있습니다.

function numericInput(evt) { 
    var charCode = (evt.which) ? evt.which : event.keyCode 
    if (charCode > 48 || charCode < 57) 
    { 
     return true; 
    } 
    else 
    { 
     return false; 
    } 
} 

내가 addEventListener를 통해이 기능을 추가 할 나는 내가 잘못 뭐하는 거지

document.getElementById("myTextbox").addEventListener("keypress", function (evt) { 
    numericInput(evt); 
}, false); 

을 다음습니까?

Answer 1

if 문에서 charCode > 48 || charCode < 57 부분은 실제로 항상 true를 반환합니다. 모든 숫자가 48보다 크거나 57보다 작기 때문입니다. ||은 &&이어야합니다. 또 다른 건, 숫자에 대한 가장 작은 KeyCode는 48이며, ||을 &&으로 바꾸면 포함되지 않습니다. 숫자에 대한 최대 KeyCode는 57이 아닙니다.

charCode > 48 || charCode < 57을 charCode >= 48 && charCode <= 57으로 바꾸면 코드가 올바르게 작동한다고 생각합니다.

편집 : Adeneo 이전에 언급 한 바와 같이이 , 당신은 evt.preventDefault()와 return false를 교체해야합니다.

이 기능은 작동합니다 :

function numericInput(evt) { 
 
    var charCode = (evt.which) ? evt.which : event.keyCode 
 
    if (charCode >= 48 && charCode <= 57) 
 
    { 
 
     return true; 
 
    } 
 
    else 
 
    { 
 
     evt.preventDefault(); 
 
    } 
 
} 
 

 
/* OR: */ 
 

 

 
function numericInput(evt) { 
 
    var charCode = (evt.which) ? evt.which : event.keyCode 
 
    if (charCode < 48 || charCode > 57) evt.preventDefault(); 
 
}