Counter for textarea

Tips and Tricks
#1

Hey there,

is there any way to count the value on a textarea field. For example I use a title and meta description and don’t want more than 250 characters. Is there a way to do that?

#2

Here is an example using Hot Controls:

JavaScript

<script>
    oc.registerControl('char-counter', class extends oc.ControlBase {
        connect() {
            this.maxCount = parseInt(this.config.counterMax || 140);
            this.$counter = document.querySelector(this.config.counterElement);
            this.listen('input', this.countChars);
            this.countChars();
        }

        countChars() {
            var count = this.maxCount - this.element.value.length;
            if (count < 0) {
                this.$counter.innerHTML = "<span style=\"color: red;\">" + count + "</span>";
            }
            else {
                this.$counter.innerHTML = count;
            }
        }
    });
</script>

HTML

<form>
    <p>
        Tweet Something:
        <span id="charCount"></span><br>
        <textarea
            name="tweet"
            id="textbox"
            class="form-control" rows="3" cols="60"
            data-control="char-counter"
            data-counter-element="#charCount"
            data-counter-max="140"></textarea>
    </p>
</form>
1 Like
#3

Thank you for your quick reply.

Is this also possible in a field in the backend? Because as far as I understand, the example is for the frontend.