Question

How could I add a counter underneath a multi-line text field to show how many characters the user has remaining before they reach the maximum character limit of that field?

Forms

Updated March 2, 2016

asked on March 2, 2016

The way I imagine it working is like other Forms products, where you start typing and with every character you type (or delete) the character counter updates. The counter would appear underneath the field.

0 0

Answer

APPROVED ANSWER

replied on March 2, 2016

You can use the javascript code from here.

For example, create a form that has a multiline field with a character limit of 1000 and a CSS class name like charcount. Then add a custom HTML field as

<div id="textarea_feedback"></div>

Now you can use this javascript

$(document).ready(function() {
    var text_max = 1000;
    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('.charcount textarea').keyup(function() {
        var text_length = $(this).val().length;
        var text_remaining = text_max - text_length;
        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

Here's a sample form

2 0

Replies

replied on March 2, 2016

You would also need to prevent copy and paste since the keyup event doesn't account for that.

0 0

replied on March 2, 2016

Copying/pasting won't matter because on the keyup event, it's just calculating the actual length of the textarea.

0 0

You are not allowed to follow up in this post.

Question

Question

How could I add a counter underneath a multi-line text field to show how many characters the user has remaining before they reach the maximum character limit of that field?

Answer

Replies

Sign in to reply to this post.