DEV Community

Cover image for Javascript Limit Characters in textbox with HTML & CSS
Shantanu Jana
Shantanu Jana

Posted on

Javascript Limit Characters in textbox with HTML & CSS

If you want to make Javascript Limit Characters in the input box then this article will help you. Here I have shown how to create Limit Characters in textbox with the help of HTML CSS and JavaScript.

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.

Below I have shown step by step how this Limit Characters input field has been created using HTML and CSS. Here I first designed it using HTML and CSS then implemented it with JavaScript.

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.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #a9d1ea;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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.

<div class="container">

</div>
Enter fullscreen mode Exit fullscreen mode
.container{
    background-color: #ffffff;
    width: 450px;
    min-height: 250px;
    padding: 30px 20px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
    box-shadow:  0 20px 25px rgba(0,0,0,0.25);
}
.container *{
    font-family: "Poppins",sans-serif;
    font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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.

<textarea id="my-text" rows="5" placeholder="Type something here.."></textarea>
Enter fullscreen mode Exit fullscreen mode
textarea{
    display: block;
    width: 100%;
    min-height: 230px;
    resize: none;
    padding: 20px;
    color: #202020;
    border: 2px solid #3ba51f;
    border-radius: 5px;
    outline: none;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Step 4: Create Characters Count Place

Now I have created a count area using the following codes. Whenever you input a character, those characters will continue to be counted. Under normal circumstances, it cannot be seen. This can be seen after using JavaScript.

 <p id="result"></p>
Enter fullscreen mode Exit fullscreen mode
p{
    width: 100%;
    text-align: right;
    margin-top: -30px;
    padding-right: 10px;
    color: #737373;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Step 5: Make the system activate with JavaScript

Above we just designed it now we will implement it with the help of JavaScript. First I set a constant of my-text and result.

var myText = document.getElementById("my-text");
var result = document.getElementById("result");
Enter fullscreen mode Exit fullscreen mode

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.

var limit = 100;
Enter fullscreen mode Exit fullscreen mode

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.

result.textContent = 0 + "/" + limit;
Enter fullscreen mode Exit fullscreen mode

Alt Text
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.

myText.addEventListener("input",function(){

    var textLength = myText.value.length;

    result.textContent = textLength + "/" + limit;

    if(textLength > limit){
        myText.style.borderColor = "#ff2851";
        result.style.color = "#ff2851";
    }
    else{
        myText.style.borderColor = "#31821b";
        result.style.color = "#31821b";
    }
});

Enter fullscreen mode Exit fullscreen mode

Alt Text

Alt Text
Hopefully, you have learned from the above tutorial how I created this JavaScript Limit Character Input Box.

If you want to use jquery instead of JavaScript, you can see my previous article. If there is any problem, you can ask me by commenting.

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

Instead of setting the styles through the style property directly, you could use setCustomValidity and then use the :invalid pseudo-selector. This also blocks the submit of the form which is ideal if is invalid. I made a demo here so you can check it out:

Notice that there are some other differences like some currying, some fixes in the syles so it doesn't break like your demo because is not using margin but position instead, and some use of CSS custom properties.

Cheers!

Collapse
hugekontrast profile image
Ashish Khare😎

Great tutorial. Well explained walk-through. Thanks for sharing!