How To Limit Character In Input Field using JavaScript

Limit Character In Input Field using JavaScript

Limit Character is a common feature in the input box. Whenever we see this type of JavaScript Character Limit in the input box of any type of website. The biggest example of this is Twitter.

Here I have created a limit character input box. Html, CSS, and javascript are used to create. Although you can create Limit Character using the max length attribute of HTML.

Limit Character In Input Field

However, even if you use the maxlength attribute, you will not be able to input more than that limit in the input box. But in this case, you can input as much as you want. When your input character exceeds the limit, a kind of error will appear.

Here I have used the Character's limit of 50. When you input more than 50 characters, the color of the border will change.


See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.


As you can see above, this is a simple Javascript Limit Characters. A box has been created on the webpage. An input box has been created in that box using textarea. 

It also has a display where the characters will count. Normally the color of the border around the input box is green. When you input more characters than the limit, the color of the border will be red. The color of the counted characters in the display will be red.

How to Create Limit Input Characters in JavaScript

Create HTML and CSS files to make it. Here I have given all the source codes. Copy those codes and add them to your file.

Limit Character HTML code

The following codes are HTML codes that have been used to add basic structure and information to this project.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Limit Characters In Input Field Javascript</title>
    <!--CSS file-->
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
      <textarea id="my-text" rows="5" placeholder="Type something here.."></textarea>
      <p id="result"></p>
  </div>

</body>
</html>

 Limit Character Input CSS Code

The following code is CSS which has designed Limit Character In Input Field.


*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #a9d1ea;
}
.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;
}
textarea{
    display: block;
    width: 100%;
    min-height: 200px;
    resize: none;
    padding: 20px;
    color: #202020;
    border: 3px solid #3ba51f;
    border-radius: 5px;
    outline: none;
}
p{
    width: 100%;
    text-align: right;
    margin-top: -30px;
    padding-right: 10px;
    color: #737373;
}

Character limit JavaScript Code

The following code is JavaScript by which Character Limit is activated.


var myText = document.getElementById("my-text");
var result = document.getElementById("result");
var limit = 50;
result.textContent = 0 + "/" + limit;

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

Hopefully, you have been able to create this JavaScript Limit Character In Input using the above code. If there is any problem then use the download button below. If there is any problem in making this textarea limit characters, please comment.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more