如何根据文本区域长度更改文本

Question

I added the following code, and I am getting the text to update, but only when clicking outside of the textarea.

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

Why is this happening and how can I make it update without clicking outside of the textarea?

Answer 1

尝试input而不是change这将在用户每次输入内容时触发。

Answer 2

according to jQuery docs: 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

This is why your event appears only on leaving the textareas focus.

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

a complete list of the events can be found here:

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

so you need to use another event, maybe like:

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

Answer 3

you you can use keyup if you want to get change the output immediately

 $('.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

Use a keyup event to update your character count while the user is typing

Try something like this

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

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

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

})

Here is a jsfiddle