Javascript Limit Characters in textbox with HTML & CSS

#html #css #javascript #beginners

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;
}

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>



.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;
}

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>



textarea{
    display: block;
    width: 100%;
    min-height: 230px;
    resize: none;
    padding: 20px;
    color: #202020;
    border: 2px solid #3ba51f;
    border-radius: 5px;
    outline: none;
}

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>



p{
    width: 100%;
    text-align: right;
    margin-top: -30px;
    padding-right: 10px;
    color: #737373;
}

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");

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;

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;

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";
    }
});