0

テキストボックスに何かを押した後、常に変化すると思われるテキストを含むスパンがあります。

<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>

それは完全に正常に機能していますが、たとえば、を押すと、スパンに"dfg"のみ存在します。"df"次の文字を追加する場合にのみ、"g".

最後の文字にも反応させたいのですが、どうすればいいですか？

4

5 に答える 5

6

おそらくkeyupを使いたいでしょう。

jQuery を使用して、イベントをインラインで追加しますか? それは悪い習慣です。on を使用してイベントを添付します。

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

quirksmode で説明されているキーアップ、キーダウン、およびキープレスの違い。

于 2012-04-14T18:20:29.980 に答える
1

ええ、少し遅れるかもしれませんが、実際に使用する方が、キーを長押しすると、キーを離すと表示されるため、使用するkeypressよりも優れています。keyupkeyup

使用する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);
    });​

この例を見てください。それはまさに前のコードです。

そしてこの例。を使用しない前のコードkeypressです。

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

于 2012-04-14T19:23:28.680 に答える
0 
<input type="text" class="response" onkeyup="return ChangeSpan()" id="how_many" name="how_many" placeholder="Enter how many..." />
于 2012-04-14T18:19:30.500 に答える
0

バインディングを使用しないのはなぜですか？これはそれを行う必要があります：

<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());
   }); 
})
于 2012-04-14T18:20:43.650 に答える
0

イベントをキーアップに変更してみてください。次に例を示します。

http://jsfiddle.net/SHdTL/

注: インラインではなく jquery を使用してイベント リスナーを割り当てることをお勧めしますが、問題には関係ありません。

于 2012-04-14T18:30:19.410 に答える