Hey friends, today in this blog you'll learn how to Limit Input Characters using HTML CSS & JavaScript. Earlier I have shared a blog on how to create Random Password using pure JavaScript and now I'm going to create a program or input field that allowed users to enter a specified number of characters only.
In this program [Limit Input Characters], there is an input field on the webpage with an icon and counter number. 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 another color which means the input field is active now. 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 start decreasing by the number of your entered characters.
You can copy the codes from the given boxes or download the code files from the given link but I recommend you download the source code files instead of copying codes. Click here to download code files.
You might like this:
Password Show or Hide Toggle
Password Strength Meter or Checker
Animated Range Slider in JavaScript
Random Password Generator in JavaScript
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Limit Input Characters | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<!-- Iconsout Link for Icons -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/solid.css">
</head>
<body>
<div class="wrapper">
<form action="#">
<input type="text" spellcheck="false" placeholder="username" maxlength="19" required>
<i class="uis uis-at"></i>
<span class="counter">19</span>
</form>
</div>
<script>
const input = document.querySelector("form input"),
counter = document.querySelector("form .counter"),
maxLength = input.getAttribute("maxlength");
input.onkeyup = ()=>{
counter.innerText = maxLength - input.value.length;
}
</script>
</body>
</html>
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%);
}
.wrapper{
background: #fff;
padding: 20px;
width: 450px;
border-radius: 5px;
box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.wrapper form{
height: 55px;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
form i{
position: absolute;
width: 55px;
text-align: center;
font-size: 23px;
color: #c4c4c4;
pointer-events: none;
}
form input:valid ~ i{
color: #58cff1;
}
form input{
height: 100%;
width: 100%;
outline: none;
padding: 0 50px 0 45px;
font-size: 20px;
caret-color: #58cff1;
border: 2px solid #ddd;
border-radius: 5px;
transition: all 0.1s ease;
}
form input::selection{
color: #fff;
background: #58cff1;
}
form input:focus,
form input:valid{
border-color: #58cff1;
}
form input::placeholder{
color: #c4c4c4;
}
form .counter{
position: absolute;
right: 3px;
width: 55px;
font-size: 20px;
color: #c4c4c4;
text-align: center;
border-left: 1px solid #d8d8d8;
pointer-events: none;
}
form input:valid ~ .counter{
color: #58cff1;
border-color: #58cff1;
}
Visit CodingNepal for more awesome videos | blogs
https://www.codingnepalweb.com/
https://www.youtube.com/codingnepal
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of Best International Schools in Hyderabad. Would love to see more examples like this for other types of elements. Keep up the good work!