Limit Input Characters – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sun, 14 May 2023 06:58:02 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Character Limit using HTML CSS and JavaScript https://www.codingnepalweb.com/character-limit-html-css-javascript/ https://www.codingnepalweb.com/character-limit-html-css-javascript/#respond Wed, 25 Aug 2021 21:11:18 +0000 https://www.codingnepalweb.com/?p=4207 Character Limit using HTML CSS and JavaScript

Hello friends, I hope you are doing well, Today are going to create an Input Character Limit using HTML CSS, and JavaScript there are lots of useful JavaScript Projects that I have built and this is one of them, let’s get started.

These features of limiting the character, you may have seen on the various input field or areas for example while we are going to add title while uploading the video on youtube then we have to keep limited character right?

Let’s have a look at the given image of our program [Character Limit using HTML CSS and JavaScript], on the upper side image we can see the blue border and title and number. On downward image, we can see a red border, title, and number. In the first image, I have entered less than 100 that’s why those colors are blue, and in the second image I have entered more than 100 characters that’s why those colors are red and we all know red color is an error sign.

Now we got one idea the limited character in this input field is 100. Let’s watch the video tutorial of this program (Character Limit using HTML CSS and JavaScript), to watch all the animation and those codes that I have used to make this program.

Character Limit using HTML CSS and JavaScript 

I have provided all the sources of this program [Character Limit using HTML CSS and JavaScript], below, but getting those codes you have to know some important points out of this video tutorial.

As you have seen on the given video tutorial of this program(Character Limit using HTML CSS and JavaScript). There is an input box with a grey border and the signal num is hidden, when I focused on the input field, its border color changed into blue and when I started typing our signal num for limiting was appeared.

When I entered the excessive character than our limitation, all blue color changed into red, and when I decreased the character than limitation, it changed into blue. To make these changes I have some javascript.

I believe now you can easily create this program, if not then don’t worry I have provided all the source code of this program [Character Limit using HTML CSS and JavaScript] below.

You Might Like This:

Input Character Limit [Source Code]

<!DOCTYPE html>
<!-- Website - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Input Character limit | CodingNepal</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="input-box">
      <textarea placeholder="Add your title" required></textarea>
      <span class="title">Title</span>
      <div class="characters">
        <span class="signal_num">0</span>
        <span class="limit_num">/100</span>
      </div>
    </div>

    <script>
      let inputBox = document.querySelector(".input-box"),
        textarea = inputBox.querySelector("textarea"),
        signalNum = inputBox.querySelector(".signal_num");

      textarea.addEventListener("keyup", () => {
        let valLenght = textarea.value.length; //stored textarea value length into valLength

        signalNum.innerText = valLenght; //converted signalNum innerText by valLength
        valLenght > 0 ? inputBox.classList.add("active") : inputBox.classList.remove("active"); // if valLength is greater than 0 than add active class if not than remove active class
        valLenght > 100 ? inputBox.classList.add("error") : inputBox.classList.remove("error"); // if valLength is greater than 100 than add error class if not than remove error class

        console.log(valLenght);
      });
    </script>
  </body>
</html>

/* Google font import link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #007bff;
  padding: 0 15px;
}
.input-box{
  position: relative;
  height: 160px;
  max-width: 560px;
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.input-box textarea{
  height: 100%;
  width: 100%;
  outline: none;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  resize: none;
  padding: 25px 15px;
  font-size: 15px;
  font-weight: 500;
  caret-color: #007bff;
}
.input-box textarea:focus,
.input-box textarea:valid{
  border-color: #007bff;
}
.input-box.error textarea{
  border-color: red;
}
.input-box textarea::placeholder{
  font-size: 15px;
  font-weight: 500;
}
.input-box .title{
  position: absolute;
  top: 38px;
  left: 45px;
  color: #007bff;
}
.input-box.error .title{
  color: red;
}
.input-box .characters{
  position: absolute;
  bottom: 35px;
  right: 45px;
  display: flex;
  align-items: center;
  color: #007bff;
  display: none;
}
.input-box.active .characters{
  display: block;
}
.input-box.error .characters{
  color: red;
}

If you face any difficulties while creating your Input Character Limit or your code is not working as expected, you can download the source code files for this Input Character Limit for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/character-limit-html-css-javascript/feed/ 0 Limit Input Characters using HTML CSS & JavaScript https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/ https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/#comments Mon, 15 Mar 2021 10:25:00 +0000 Limit Input Characters using HTML CSS & JavaScript
Hey friends, today in this blog you’ll learn how to Limit Input Characters using HTML CSS & JavaScript. Earlier I have shared a blog on how to create Random Password using pure JavaScript and now I’m going to create a program or input field that allowed users to enter a specified number of characters only.
 
In this program [Limit Input Characters], there is an input field on the webpage with an icon and counter number. This counter number informs the user about how many numbers of characters they can enter. At first, this input field is inactive with a grey border color but when you focus on the input field then the color of the border change into another color which means the input field is active now.
 
When you start typing some characters in the input field then the color of the icon and counter also change into the same color as the input border color as well the counter starts decreasing by the number of your entered characters.
 
If you want to watch a full video tutorial or feeling difficult to understand what I’m saying above then you can the full video of this program [Limit Input Characters]

Video Tutorial on How to Limit Input Characters

 
In the video, you have seen the demo of this design or program and how I created this. As you know, I used JavaScript to make the counter dynamic and I believe these few lines of JavaScript were not much difficult to understand for you even if you’re a beginner. Except this all other parts including changing border color on focus in the input field and changing the color of the icon if user input some characters are purely created using HTML & CSS only.

This can be only possible using required attribute in the <input type=”text”> tag and :focus & :valid selectors in CSS. In this video, I have just shown you limit input characters in input but with the same codes, you can also do for the Textarea field.

You might like this:

Limit Input Characters in JavaScript [Source Codes]

To create this program [Limit Input Characters]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Limit Input Characters from the below download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Limit Input Characters | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <!-- Iconsout Link for Icons -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/solid.css">
</head>
<body>
  <div class="wrapper">
    <form action="#">
      <input type="text" spellcheck="false" placeholder="username" maxlength="19" required>
      <i class="uis uis-at"></i>
      <span class="counter">19</span>
    </form>
  </div>

  <script>
    const input = document.querySelector("form input"),
    counter = document.querySelector("form .counter"),
    maxLength = input.getAttribute("maxlength");

    input.onkeyup = ()=>{
      counter.innerText = maxLength - input.value.length;
    }
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%);
}
.wrapper{
  background: #fff;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.wrapper form{
  height: 55px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
form i{
  position: absolute;
  width: 55px;
  text-align: center;
  font-size: 23px;
  color: #c4c4c4;
  pointer-events: none;
}
form input:valid ~ i{
  color: #58cff1;
}
form input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 50px 0 45px;
  font-size: 20px;
  caret-color: #58cff1;
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: all 0.1s ease;
}
form input::selection{
  color: #fff;
  background: #58cff1;	
}
form input:focus,
form input:valid{
  border-color: #58cff1;
}
form input::placeholder{
  color: #c4c4c4;
}
form .counter{
  position: absolute;
  right: 3px;
  width: 55px;
  font-size: 20px;
  color: #c4c4c4;
  text-align: center;
  border-left: 1px solid #d8d8d8;
  pointer-events: none;
}
form input:valid ~ .counter{
  color: #58cff1;
  border-color: #58cff1;
}

That’s all, now you’ve successfully created a Limit Input Characters using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/feed/ 1