"onkeypress"지연으로 jQuery를 변경하려면

Question

내 텍스트 상자에서 뭔가를 누른 후 끊임없이 변하는 텍스트가있는 스팬이 있습니다.

<input type="text" class="response" onkeypress="return ChangeSpan()" id="how_many" name="how_many" placeholder="Enter how many..." /> 

내 jQuery를

: 그것은 완벽하게 잘 작동하지만 것

<script type="text/javascript"> 
function ChangeSpan() { 
    var text = $("#how_many").val(); 
    $('#changeText').text(text); 
} 
</script> 

나는의이 기간에 "df" 유일한 존재 "dfg"을 가정 해 봅시다 누르면. 다음 charecter를 추가 할 때만 "g"이 추가됩니다.

마지막 문자에도 응답하고 싶습니다. 어떻게해야합니까?

Answer 1

아마도 keyup을 사용하고 싶을 것입니다.

jQuery를 사용하고 이벤트를 인라인에 추가 하시겠습니까? 그것은 나쁜 습관입니다. on을 사용하여 이벤트를 첨부하십시오. 의 keyup,를 keyDown 및 누르기 사이

$("#how_many").on("keyup", function(){ $('#changeText').text(this.value); }); 

차이 quirksmode에 설명했다.

Answer 2

<input type="text" class="response" onkeyup="return ChangeSpan()" id="how_many" name="how_many" placeholder="Enter how many..." /> 

Answer 3

왜 바인딩을 사용하지 않으시겠습니까? 이 작업을 수행해야합니다 :

<input type="text" class="response" id="how_many" name="how_many" placeholder="Enter how many..." /> 



$(window).load(function(){ 
    $("#how_many").bind('focus blur keyup',function(){ 
    $('#changeText').text($(this).val()); 
    }); 
}) 

Answer 4

이벤트를 키 업으로 변경하십시오. 다음 예는 다음과 같습니다

http://jsfiddle.net/SHdTL/

참고 : 나는 인라인보다뿐만 아니라 이벤트 리스너를 할당 할 jQuery를 사용하는 것이 좋습니다 싶지만,이 문제에 관련이 아니다.

Answer 5

그래, 조금 늦었을 수도 있지만 실제로는 keypress을 사용하는 것이 keyup보다 우수합니다. 키를 길게 누르면 keyup을 사용하면 해제 할 때 표시되기 때문입니다.

keypress을 사용하면 입력 한 내용을 직접 볼 수 있지만 아래 코드와 같이 사용하면됩니다.

유일한 문제는 keypress이 문자를 삭제할 경우 인식하지 않는다는 것입니다. 따라서 keypress이 더 좋지만 keyup도 사용해야합니다.

$("#how_many") 
    .keypress(function(e) { 
     var text = $("#how_many").val() + String.fromCharCode(e.which); 
     $("#changeText").text(text); 
    }) 
    .keyup(function(e) { 
     var text = $("#how_many").val(); 
     $("#changeText").text(text); 
    });​ 

보기 this보기. 이전 코드와 정확히 같습니다.

및 this 예. keypress을 사용하지 않고 이전의 코드입니다.

텍스트 상자에 포커스가있는 동안 두 예제에서 모든 문자 키를 누릅니다. 보시다시피 첫 번째 예제가 더 잘 반응합니다.