Question

我添加了以下代码，我正在更新文本，但在单击textarea外部时只需。

$('.form__input-el').change(function() {
    $('.form__character-indicator').text($('.form__input-el').val().length);
})

为什么会发生这种情况？如何在不点击textarea外部的情况下进行更新？

Answer 1

尝试使用input代替change，每次用户输入内容时都会触发此内容。

Answer 2

根据jQuery文档：For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus

这就是为什么您的活动仅在离开textareas焦点时出现。

https://api.jquery.com/change/

可在此处找到完整的事件列表：

https://api.jquery.com/category/events/

因此您需要使用其他活动，例如：

https://api.jquery.com/keydown/

Answer 3

如果你想立即改变输出，你可以使用keyup

$('.form__input-el').keyup(function() {
    $('.form__character-indicator').text($('.form__input-el').val().length);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form__input-el"></textarea>
<div class="form__character-indicator"></div>

Answer 4

在用户输入时使用keyup事件更新您的字符数

尝试这样的事情

$('.textarea').on('keyup', function() {

  var newCount = $(this).val().length

 $('.count').html(newCount)

})

这是jsfiddle

如何根据textarea长度更改文本

4 个答案: