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>

它工作得非常好，但是当我按下让我们说"dfg"时，它只显示跨度上的"df"。只有当我添加下一个charecter时，它才会添加"g"。

我希望它也能回应最后一个角色，我该怎么做？

Answer 1

您可能想要使用keyup。

您使用jQuery并将事件内联添加？这是不好的做法。使用on附加事件。

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

在quirksmode上解释了keyup，keydown和keypress之间的区别。

Answer 2

是的，我可能会有点迟，但实际上使用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。

当文本框处于焦点时，保留两个示例中的任何字符键。正如您所看到的，第一个示例的反应更好。

Answer 3

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

Answer 4

为什么不使用绑定？这应该这样做：

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

尝试将您的活动更改为keyup。这是一个例子：

http://jsfiddle.net/SHdTL/

注意：我建议使用jquery来分配你的事件监听器而不是内联，但这与你的问题无关。

jQuery与“onkeypress”滞后来做出改变

5 个答案: