DEV Community

Cover image for Input Character Limit with counter using HTML, CSS, and Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Input Character Limit with counter using HTML, CSS, and Javascript

Hello friends, today in this blog, we will learn how to create an input with character limit and counter. In our previous blog, we saw how to create a random password generator using HTML, CSS, and Javascript. Earlier I shared many blogs on javascript projects. You can check them if you want.

In this project [Input Character Limit with counter], there is an input, icon, and counter as you can see in the image above. This counter number informs the user about how many numbers of characters they can enter. At first, this input field is inactive with a grey border color but when you focus on the input field then the color of the border change into green color which means the input field is active now.

You may like these:

When you start typing some characters in the input field then the color of the icon and counter also change into the same color as the input border color as well the counter starts decreasing by the number of your entered characters.

If you want to watch a full video tutorial or feeling difficult to understand what Iā€™m saying above then you can the full video of this program [Input Character Limit with counter].

Check full video tutorial and preview here.

HTML Code

<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<body>
    <div class="wrapper">
        <div class="form-input">
            <input type="text" maxlength="20" placeholder="Name" required>
            <i class="fa-solid fa-at"></i>
            <span class="counter"></span>
        </div>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code

/* --------------------- Created By InCoder --------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #11ca71;
}

.wrapper{
    padding: 2rem 1.6rem;
    border-radius: .2rem;
    background-color: #fff;
}

.wrapper .form-input{
    position: relative;
}

.wrapper input {
    outline: none;
    width: 20rem;
    cursor: text;
    font-size: 1rem;
    position: relative;
    border-radius: .4rem;
    padding: .4rem 1.8rem;
    color: rgb(0 0 0 / 80%);
    transition: all .3s ease-in-out;
    border: 2px solid rgb(0 0 0 / 20%);
}

.wrapper input:focus,
.wrapper input:valid {
    border: 2px solid #11ca71;
}

.wrapper input::placeholder {
    font-weight: 500;
    color: rgb(0 0 0 / 40%)
}

.wrapper .form-input i {
    top: 50%;
    left: 6%;
    z-index: 1;
    position: absolute;
    padding-left: .1rem;
    padding-right: .2rem;
    color: rgb(0 0 0 / 20%);
    transform: translate(-50%, -50%);
}

.wrapper .form-input span {
    right: -8%;
    z-index: 1;
    bottom: -100%;
    position: absolute;
    padding-left: .1rem;
    padding-right: .2rem;
    color: rgb(0 0 0 / 50%);
    transform: translate(-50%, -50%);
}

.wrapper input:valid ~ i {
    color: #11ca71;
}

.wrapper input:valid ~ span {
    color: #11ca71;
}
Enter fullscreen mode Exit fullscreen mode

Javascript Code

let input = document.querySelector('.form-input input')
        counter = document.querySelector('.counter')
        maxLength = input.getAttribute('maxlength')
        counter.innerHTML = `${maxLength}/${maxLength}`

        input.addEventListener('keyup', (e) => {
            counter.innerHTML = `${parseFloat(maxLength) - e.target.value.length}/${maxLength}`
        })
Enter fullscreen mode Exit fullscreen mode

Discussion (0)