如何使用jQuery显示实时字符数？

请检查下面的代码。 我想使用jquery javascript实时显示输入字符数。 但问题是，当我使用“textarea”时，它可以工作，但当我使用正常的输入类型文本时，它不起作用。

        <!--    $('textarea').keyup(updateCount); $('textarea').keydown(updateCount); function updateCount() { var cs = $(this).val().length; $('#characters').text(cs); }  -->     $('text').keyup(updateCount); $('text').keydown(updateCount); function updateCount() { var cs = $(this).val().length; $('#characters').text(cs); }    

Answer 1

这是一个工作小提琴，将你的两个事件keyup和keydown成一行 🙂

您的选择器错误， text不存在。 所以我调用input[name="name"]来获取你的name值的输入：

 $('input[name="name"]').on('keyup keydown', updateCount); function updateCount() { $('#characters').text($(this).val().length); } 

Answer 2

使用“textarea”版本，您可以通过$('textarea').keyup(updateCount)和$('textarea').keydown(updateCount)选择“textarea”，但是使用文本输入您选择输入文本时会出错。

我通过在输入文本上放置一个名为“foo”的id来修复它。 这应该现在正在运作。

Answer 3

如果您想获得带有文本类型的输入，您必须使用这样的选择器

 $('input[type="text"]').keyup(updateCount); $('input[type="text"]').keydown(updateCount); 

这是所有jQuery选择器的列表

Answer 4

您没有在此处选择输入字段。
请尝试以下方法

  $('input').keyup(updateCount); $('input').keydown(updateCount); 

Answer 5

在这里，您可以使用解决方案https://jsfiddle.net/mLb41vpo/

 $('input[type="text"]').keyup(updateCount); function updateCount() { var cs = $(this).val().length; $('#characters').text(cs); } 

Answer 6

 $("input").keyup(function(){ $("#characters").text($(this).val().length); }); 

Answer 7

你的代码中的一切都是正确的，你只需添加“：”就可以了解你的类型。 这将使其识别，它是输入类型。

例：

我只更改了你的脚本。 只要找到变化，你就会明白。