Javascript Limit Characters in textbox with HTML & CSS
Tags: html, css, javascript, beginners
Published: 2021-09-10 15:55:26

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](https://www.foolishdeveloper.com/2021/09/javascript-limit-characters-in-textbox.html) 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. 
 {% codepen https://codepen.io/fghty/pen/VwWPNao default-tab=result %}

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.
```css
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #a9d1ea;
}
```
![Alt Text](https://1.bp.blogspot.com/-f4GvQiQ4M2I/YTnWC4aXcaI/AAAAAAAABeY/Hfdf9ra2SIASZlqwoI0bdQZmUtqyZE_TgCLcBGAsYHQ/s16000/Screenshot%2B%2528535%2529%2B%25285%2529.jpg)
 
### 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.

```html
<div class="container">

</div>
```

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

 ![Alt Text](https://1.bp.blogspot.com/-gn088c6V7B0/YTnWL_iohiI/AAAAAAAABeg/v9L7hEjNV_Q--acn3RFbG8Ho3vk5B1sXwCLcBGAsYHQ/s16000/Screenshot%2B%2528535%2529.jpg)
### 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.

```html
<textarea id="my-text" rows="5" placeholder="Type something here.."></textarea>
```
```css
textarea{
    display: block;
    width: 100%;
    min-height: 230px;
    resize: none;
    padding: 20px;
    color: #202020;
    border: 2px solid #3ba51f;
    border-radius: 5px;
    outline: none;
}
```
![Alt Text](https://1.bp.blogspot.com/-u9_BUfdcL9Y/YTnWQp9KBdI/AAAAAAAABek/IbIaIFtXpeocs56Yd5eN5FT9hmpeRxGMACLcBGAsYHQ/s16000/Screenshot%2B%2528535%2529%2B%25281%2529.jpg)
 
### 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.

```html
 <p id="result"></p>
```

```css
p{
    width: 100%;
    text-align: right;
    margin-top: -30px;
    padding-right: 10px;
    color: #737373;
}
```
![Alt Text](https://1.bp.blogspot.com/-spB_TKBR1Jg/YTnXPRWI7oI/AAAAAAAABew/yjHkOXHp1WcQvJStESbGtKoX4fYSNvJHQCLcBGAsYHQ/s16000/Screenshot%2B%2528535%2529%2B%25281%2529%2B%25281%2529.jpg)
 
### 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`. 

```javascript
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.

```javascript
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`.

```javascript
result.textContent = 0 + "/" + limit;
```

 ![Alt Text](https://1.bp.blogspot.com/-HA83jeoJ02g/YTnXcoJWDvI/AAAAAAAABe0/HTc4_sF-bhYeJlyRog1dkDOoiWTURV_yACLcBGAsYHQ/s16000/Screenshot%2B%2528535%2529%2B%25284%2529.jpg)
 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.

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

```
 ![Alt Text](https://1.bp.blogspot.com/-_48oNh29sgs/YTnX47kBv0I/AAAAAAAABfA/YCa65BRDsW8oELmO5W4auWXFUKyKUggQwCLcBGAsYHQ/s16000/Screenshot%2B%2528535%2529%2B%25282%2529%2B%25281%2529.jpg)

![Alt Text](https://1.bp.blogspot.com/-d8mE25eEzb4/YTnYdsR5SfI/AAAAAAAABfI/elEukCuA3d0qvWntMU-G2Nlrvm9ZFgdcwCLcBGAsYHQ/s16000/Screenshot%2B%2528535%2529%2B%25283%2529%2B%25281%2529.jpg)
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](https://www.foolishdeveloper.com/). 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/