"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"を言わせて押したとき。次のチャレクタを追加するときにのみ、"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

うん、私はあるかもしれない少し遅れたが、実際にあなたが非常に長いキーを保持している場合、あなたがkeyupを使用する場合は、それを解放するとき、それが表示されますので、keyupよりも優れているkeypressを使用。

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を使用しない前のコードです。

テキストボックスにフォーカスがある間、両方の例で任意の文字キーを保持します。ご覧のとおり、最初の例はよりよく反応します。