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:
- Custom Select Input with search option
- Create Todo List App
- Password strength checker
- Text to Speech Converter
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>
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;
}
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}`
})
Top comments (0)