We see this type of character limit in the registration forms of websites. Where the user is told how many characters can be input there. Each character will count when you input the character. Warn the user when your input text exceeds the maximum input character.
Below I have given a live demo that will help you to know how this design works.
See the Pen
I made a small box on a web page as you saw in the demo above. This box contains an input place where you can input characters. Here I have used the maximum limit of 100. You can increase your choice if you want.
A border has been used around the input area. Normally this border is green and the counter numbers are also green. When you input a character in it, the number will continue to increase. When the size of the character exceeds 100, the green border will be red.
Step 1: Design the Web page
I designed the webpage using the CSS code below. Here I have used blue as the background color of the webpage.
Step 2: Create a box with HTML and CSS
Now I have created a box on the webpage. As you can see above, there is a rectangular box. I have used this box with a minimum height of 250 px and a width of 450 px. I used white as the background color and border-radius to make the four of the boxes around.
Step 3: Create input space using Textarea
I created the text input place using the HTML and CSS code below. Basically, I used the textarea of HTML to create the input place. As you can see in the demo, there is usually a green border around the input box. I used border: 2px solid # 3ba51f to make it.
Step 4: Create Characters Count Place
Using the var limit, I set the limit, that is, the number of characters you can input. Here I have used 100. If you want to input 200 characters in that input box then you can use 200 instead of 100.
I have used the following code to see how the counted characters in the input box look. As you have seen before, we have created a count area using HTML and CSS. Now I have implemented it using result.textContent.
Now below I have given the full condition. What if there are 100 characters in your input area and what if there are more than 100. For this, I have used the if function. First I saved the total number of characters to be input in the input box in a constant called textLength.
If the value of textLength exceeds the limit, the border and color will be red.
Then I put else and gave another condition. If the above condition does not apply then the text area and the result will be green which means there will be no change.