How to Limit Characters Input using JavaScript

Limit Input Characters JavaScript

Many times we see Characters Input in the input box. If you want to create that kind of limit input characters javascript then this tutorial is for you.

Here I have shown step-by-step how to create JavaScript limit characters input. There is no need to worry if you are a beginner. Here I have created an input box that has a limit of 20 characters. You can change the value of this limit as you like.

Limit Input Characters JavaScript

This type of javascript limit input length is very easy to create. Using some amount of HTML first created the input space and display. Then I designed it using CSS. Finally activated using JavaScript.
Below is a preview that will help you learn how it works.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.


As you can see above there is a box on the webpage. This box contains an input space. I created that input space using the input function of HTML. 

To the right of the input box is a small box where the characters will count. This means that as many characters as your input in the input box, the characters will continue to decrease accordingly.

How to limit Characters in JavaScript

Here the character limit is given as twenty. Although you can change the value of your choice. 

Below you will find tutorials on how to create this limit input characters javascript. If you just want the source code then use the download button below.

1. Create a box on the webpage

Using the following codes I have created the basic structure of this input space i.e. I have created a box on the webpage. You can see the place by inputting in this box.


<label class="field">

</label>

I designed the webpage using the following codes. Light blue color has been used on the web page here. I used box-shadow to enhance the background color and beauty of the box.


* {
border: none;
outline: none;
}

html,
body {
height: 100%;
}

body {
margin: 0;
background: #95e7f6;
display: flex;
align-items: center;
justify-content: center;
font-family: "Open Sans", sans-serif;
}



.field {
position: relative;
background: white;
padding: 13px 18px;
box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

Create a box on the webpage

2. Create a place to input characters

Now the input space has been created using the input function of HTML. A limit has been used here. I have used maxlength = 20 for this character's Input. Here I have given the value of twenty. 

You can change its value here. It is instructed to change the border color using a focus in the input box. When you click on the input box, the border color of the input box changes from blue to red.


 <input class="field__input" type="text" placeholder="Your Input" maxlength=20>


.field__input {
font-family: inherit;
font-size: 1.3rem;
padding: 0.8rem 2rem 0.8rem 15px;
min-width: 18rem;
background: transparent;
color: #0e53f6;
border: 0.14rem solid rgb(61, 132, 236);
transition: border-color 0.4s;
}

.field__input:focus {
border-color: #ff4754;
}

.field__input::placeholder {
color: rgba(13, 82, 241, 0.76);
user-select: none;
}

Create a place to input characters

3. Create a display in the input box

Now I have created a small display in which the countdown of the Character can be seen. The text color of the display is white, the background color is blue.


<span class="field__counter"></span>


.field__counter {
position: absolute;
right: 17px;
top: 50%;
transform: translateY(-50%);
width: 2.5rem;
height: 3.7rem;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
font-size: 1.2em;
color: #f5f8ff;
background: rgb(26, 111, 227);
border-radius: 0.2rem;
}

Create a display in the input box

4. Activate Limit Characters Input with JavaScript

Above we have completely designed now to implement the restricted characters in the input field. I have used some amount of JavaScript for this. These javascript are very simple. Here you will find the complete explanation.


  const input = document.querySelector("input.field__input");
  const counter = document.querySelector("span.field__counter");

  // getting the maxlength attribute of the input
  const maxLength = input.getAttribute("maxlength");

  // Setting the Text of the Counter to the max char Count
  counter.innerText = maxLength;

  // the input event runs on every key press
  input.addEventListener("input", (event) => {
    // getting the input value length
    const valueLength = event.target.value.length;

    // calculating the amount of chars that are left
    const leftCharLength = maxLength - valueLength;

    if (leftCharLength < 0) return;

    // updating the lenght of the counter span
    counter.innerText = leftCharLength;
  });

Limit Characters Input with JavaScript

Hope you find out how to create this Limit Characters Input using the above codes. If there is any problem then you can definitely let me know by commenting. 

Earlier I showed how to implement this type of limit character in the login form. If you want to create a JavaScript Limit Characters Input in the login form, 

you can see that design. The source code of this input character limit javascript is in the download button below.





Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

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

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:...
Read more

How To Limit Character In Input Field using JavaScript

Image
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 i...
Read more