Build a Remaining Character Count Component with Alpine.js

Build a Remaining Character Count Component with Alpine.js

Learn how to build a remaining character counter in Alpine.js using only a few lines of code.

Before we begin, let's lay down some basic markup for our character counter.

I'm going to be using x-ref directives to identify each part so that you can keep track of everything easily.

<div>
    <textarea x-ref="content"></textarea>
    <p x-ref="remaining"></p>
</div>

On top of that, we need to ensure Alpine can initialise a new component. Let's add an x-data attribute to the root element, in this case a <div>, as well as a data property to hold the contents of the <textarea>.

<div x-data="{ content: '' }">
    <textarea x-ref="content"></textarea>
    <p x-ref="remaining"></p>
</div>

The new content property hasn't been hooked up to the <textarea> yet. The simplest way to do this would be using x-model, which will add an event listener to the element and update the property with the elements value property.

<div x-data="{ content: '' }">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining"></p>
</div>

With data binding setup, all that's left to do is output the number of remaining characters. To do this, we need to know how many characters the content has and what the limit is.

I like to use data attributes for variable pieces of data, such as the character limit. I'll add a new data-limit attribute to hold this.

<div x-data="{ content: '' }" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining"></p>
</div>

The reason I like using data attributes is because if you later decide to move the data object into a function, you can still see the arguments that change the behaviour of the component directly in the markup.

I'm also going to add a new property on our component to hold the limit.

<div x-data="{ content: '', limit: $el.dataset.limit }" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining"></p>
</div>

If you don't want to use a data attribute for the limit, you could put the value directly in the data object instead.

The $el object being used is a magic variable provided by Alpine and is a reference to the root element (the <div>). Since this is just a regular Element object, we can use the dataset property to get the data-limit.

There are a couple of ways to go about actually outputting the remaining characters. I'll cover both of them here, since you might like one more than the other.

Method One - template literals

Using Alpine's x-text alongside template literals, you can dynamically set the innerText of an element.

Applying this method to the element looks a little something like:

<div x-data="{ content: '', limit: $el.dataset.limit }" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining" x-text="`You have ${limit - content.length} characters remaining."></p>
</div>

Method Two - dynamic <span>

Compared to the first method, this approach will only update the innerText of a single child element instead of the entire <p> element.

This means that you can render the non-dynamic content on the server, or statically.

<div x-data="{ content: '', limit: $el.dataset.limit }" data-limit="100">
    <textarea x-ref="content" x-model="content"></textarea>
    <p x-ref="remaining">
        You have   characters remaining.
    </p>
</div>

alpine javascript programming web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.