监听文本框中的变化答案

【问题标题】：listen for changes in a textbox监听文本框中的变化
【发布时间】：2012-08-17 06:51:06
【问题描述】：

我正在尝试为我网站上的个性化产品页面编写一些代码。我的目标是有一个文本框，允许用户输入个人消息以继续使用产品并使用 jQuery 根据输入的字符数确定价格。然后在屏幕上打印价格。

我不确定我应该使用哪个监听器。 “keyup”似乎在输入第一个字符后停止，“change”仅在用户单击文本框时才有效。我希望代码在用户键入时提高价格。关于我哪里出错的任何提示？

<script type="text/javascript" language="javascript">
     $(document).ready(function()  {
        jQuery("#phrase").change( function () {     
                 var length = jQuery("#phrase").length;
                 var price = length * 2.5;


                 jQuery("#price").html(price);
    });

});
</script>

jsFiddle 在这里：

http://jsfiddle.net/WVHaT/8/

【问题讨论】：

和 HTML 代码？它在哪里？

标签： jquery events textbox listener

【解决方案1】：

$('#phrase').keyup(function() {
  var length = this.value.length * 2.5;
  $('#price').html(length);
});

http://jsfiddle.net/jameskyburz/WVHaT/

【讨论】：

【解决方案2】：

问题在于jQuery("#phrase").length 获得了与 jQuery 选择器匹配的 ELEMENTS 数量。而是使用jQuery("#phrase").val().length 来获取输入的字符数。

【讨论】：

【解决方案3】：

更改您的代码

var length = jQuery("#phrase").length;

到

var length = jQuery("#phrase").val().length;

并致电jQuery("#phrase").keyup

【讨论】：

【解决方案4】：

我会使用keyup，因为它是在文本框的值更新之后触发的（与在文本框的值更新之前触发的keydown相反）以及紧接在键之后（与.change 事件相反，该事件仅在输入失去焦点时触发）。

它似乎只为一个键触发是另一个问题，FarligOpptreden 的答案解决了这个问题！

【讨论】：