자바 문자 제한 - 유효하지 않은 문자가 일시적으로 표시됨

Question

자바 스크립트를 사용하여 다양한 텍스트 입력 필드의 문자를 클라이언트 쪽 유효성 검사 형식으로 제한하고 사용 편의성을 향상 시켰습니다. 나는이 작업을 수행하려면 다음 코드를 사용하고 있습니다 :

나는 때 onKeyPress =이 함수를 호출

function validNumbers(caller) { 
    var exp = /^[\d.]+/g; 
    var str = ''; 
    if (caller.value.match(exp)) { 
     str = caller.value.match(exp).toString(); 
    } else { 
     str = ''; 
    } 
    str = str.replace(/\D/g,''); 
    caller.value = str; 
} 

"validNumbers (이);" 대부분의 경우 매력처럼 작동합니다. 문제는 필드에 유효하지 않은 문자를 입력하면 해당 필드의 값이 (자바 스크립트의 관점에서) 업데이트 된 것처럼 보이지만 다음 키를 누르기 전까지 문자가 남아 있다는 것입니다. 다음 키가 유효하지 않은 경우에도 시각적으로 다음 키의 값으로 대체됩니다. 원하는 효과는 잘못된 키를 누를 때 잘못된 값이 시각적으로 표시되지 않는다는 것입니다. 어떻게해야합니까?

편집 : 나는 올바른 길로 나를 잡았 기 때문에 아래의 대답을 선택했습니다. "! @ # $ %^& *() _ +"과 같은 문자를 방지하기 위해 제외 된 이벤트 목록에 e.shiftKey를 추가해야했지만 그 사실을 알 수 없었습니다. 혼자서.

Answer 1

함수에서 값을 텍스트 필드에 입력하고 평가 한 후에 값을 지우고 있습니다. 대신 텍스트 필드에 입력되지 못하도록해야합니다. 이 작업을 수행하려면를 keyDown의 preventDefault() 방법을 사용하려면 :

onkeydown="function(e) { validNumbers(e); }" 

function validNumbers(e) { 
    if (e.keyCode == 1 || e.keyCode == 2 ... etc) { 
     e.preventDefault(); 
    } 
} 

이 이제까지 입력 필드를 입력에서 특정 문자 (reference here)을 차단합니다. 이렇게하면 복사 및 붙여 넣기가 차단되지 않으므로 전체 문자열 'onpaste'를 평가하거나 유사한 이벤트 처리기로 'onpaste'를 방지해야합니다.

이것은 크로스 브라우저 솔루션이 아니지만 발을 넉넉하게해야합니다. 실제 예를 보려면 JSFiddle을 참조하십시오.