How to display character count on textbox

Hi,

You can do this by using a a Calculation field with a calculation targeting the text field. The calculation looks like this “=Text.Length” targeting the text box titled Text. You can see this in action using the following form template.

Cognito Forms Character Count Template

You will have to tab or enter out of the Text field in order for the calculation to take effect. Let us know if you have any other questions.

Hi Cognito,

Thank you for the reply. I wonder if you have any function that allows the calculation field to update in real time. In the sense, you dont to have tab or enter out of the text field in order for the calculation to take effect.

Please let me know

I am one of the Cognito Forms co-founders. You can add the following bit of JavaScript to automatically add character counts below all of your textareas on the page:

$(‘textarea’).keyup(function() {
var chars = $(this).val().length;
var message = $(this).next(“span”);
if (message.length == 0)
message = $(this).after(“<span></span>”);
message.text(“You have typed ” + chars + ” characters”);
});

Not sure if this works for the specific form you are building, but this works using keyup events, so it functions in real time. Here is the fiddle for this example:

https://jsfiddle.net/hNn5b/399/

In Nicholas’s example, you could also make the calculation hidden and reference this calculated field in a Content block immediately below the field. However, this does not address the immediacy question, which is why I am following up with a JQuery-based bit of script.

Just remember to place this code inside a script block and make sure JQuery is available. Please let me know if this works or if you need help adapting it to your specific needs.

jamiemthomas, For the technically challenged–like me– Is there a specific file this script goes in? I only see one js file in the plug-in, cognito-forms/tinymce/plugin.js Is this where this script is supposed to go? If not, can you be specific as to where we should add it?

By the way, I LOVE this plug-in and will be leaving 5 stars as soon as I get everything functioning.

Nope. It doesn’t go there! That hides my MCEeditor!

We had another user who asked the same question recently, and we just realized that this example now longer works!

Here is the updated script:

<script>
$(document.documentElement).on(‘keyup’, ‘.cognito textarea’, function () {
var chars = $(this).val().length;
var message = $(this).next(“span”);
if (message.length == 0)
message = $(“<span></span>”).insertAfter(this);
message.text(“You have typed ” + chars + ” characters”);
});
</script>

And here is a working code pen: https://codepen.io/jamiemthomas/pen/qNXNAQ