jQuery를 사용하여 입력 필드에서 사용 가능한 문자를 실제로 제한하는 방법은 무엇입니까?

Question

가입 폼에 JS 유효성 검사를 추가하기 시작했으며 사용자 이름 입력 필드를 Twitter 스타일 (jQuery 사용)으로 원합니다. 이는 입력이 특정 문자로 제한되고 다른 문자가 나타나지 않는다는 것을 의미합니다.

지금까지, 나는이있어 :

jQuery(document).ready(function() { 
jQuery('input#user_login').keyup(function() { 
    jQuery(this).val(jQuery(this).val().replace(/[^a-z0-9\_]+/i, '')); 
    }); 
}); 

이 솔루션은 작동하지만 문제는 잘못된 문자가 한 사용자가 키를 공개하지 않은로 표시한다는 것입니다 (내 끔찍한 영어 실례 !) keyup 이벤트가 트리거되지 않습니다. 문자가 입력 필드에서 잠시 깜박 인 다음 사라집니다.

이상적인 솔루션은 Twitter에서하는 방식입니다. 캐릭터는 한 번도 표시되지 않습니다.

어떻게하면됩니까 ?? 나는 입력을 어떤 식 으로든 가로 채야 할 것 같다.

감사합니다. 대신의 keyup

을 제외하고

jQuery('input#user_login').keydown(function() { 

의를 keyDown 사용

Answer 1

, 당신은 keypress을 사용해야합니다.

<input type="text" id="alpha"> 


<script type="text/javascript"> 

function alphaFilterKeypress(evt) { 
    evt = evt || window.event; 
    var charCode = evt.keyCode || evt.which; 
    var charStr = String.fromCharCode(charCode); 
    return /[a-z]/i.test(charStr); 
} 

window.onload = function() { 
    var input = document.getElementById("alpha"); 
    input.onkeypress = alphaFilterKeypress; 
}; 

</script> 

Answer 2

보십시오 : 당신 선택은 그것이 필요 이상 느립니다. ID는 고유하며 빠른, 그래서

jQuery('#user_login').keydown(function() { 

충분해야

당신은 당신이를 고려하고,

if (event.keyCode == ...) 

또한 발에 할당하기 전에, iself 키 코드를 캡처 고려하는 것이 좋습니다 alt, ctls 및 shift 키? 당신은 사용자가 아니라 처리됩니다 특정 키보다 입력 할 수있는 문자를 제한하려면 그 키 코드가 아닌 문자 정보를보고하는 유일한 이벤트입니다으로

if (event.shiftKey) { 

if (event.ctrlKey) { 

if (event.altKey) { 

Answer 3

당신은 입력과 암호의 최대 길이 속성을 사용할 수 있습니다 : : 여기에 (jQuery를 사용하지 않고) 모든 주요 브라우저에서 바로 AZ 문자로 문자를 제한하는 솔루션입니다 info (즉, 실제로 트위터를 수행하는 방법).

Answer 4

감사합니다. @TimDown이 문제를 해결했습니다! 편집을 위해 백 스페이스와 화살표를 사용할 수 있도록 코드를 약간 수정했습니다. 코드 서식을 사용하려면 회신을 게시합니다.

대단히 감사합니다.

function alphaFilterKeypress(evt) { 
    evt = evt || window.event; 

    // START CHANGE: Allow backspace and arrows 
    if(/^(8|37|39)$/i.test(evt.keyCode)) { return; } 
    // END CHANGE 

    var charCode = evt.keyCode || evt.which; 
    var charStr = String.fromCharCode(charCode); 

    // I also changed the regex a little to accept alphanumeric characters + '_' 
    return /[a-z0-9_]/i.test(charStr); 
} 

window.onload = function() { 
    var input = document.getElementById("user_login"); 
    input.onkeypress = alphaFilterKeypress; 
};