Twitter like remaining character count using jQuery

Twitter only allows maximum 140 characters of a tweet. At the time of entering input, it shows how many characters are remaining.

Remaining character value changes on every character input.

Similar to Twitter other websites also uses the same functionality.

For example – In the medium, you could see this in Bio section there it allows 160 character input after that it didn’t take any inputs.

In this tutorial, I am creating the similar type of functionality with jQuery.

---

Contents

1. HTML
2. jQuery
3. CSS
4. Demo
5. Conclusion

---

1. HTML

Creating a basic HTML layout which contain a <textarea id='txt_tweet'> and a button element. Showing remaining characters on <span id=’remain’>.

Completed Code

<div class="container">
 <div class='content'>
   <textarea id='txt_tweet' placeholder="What's happening?" ></textarea>
   <div>
    <span id='remain'>140</span>&nbsp;<input type='button' value='Tweet' id='tweet'>
   </div>
  </div>
</div>

---

2. jQuery

On document ready initialize maxlen variable to the maximum number of character a Textarea contain. I set it to 140 you can change it to any other number within your project.

Defining two events – keyup and keydown on Textarea element.

keyup –  First, storing Textarea content length in a variable txtLen and checking it is less than or equal to maxlen (maximum value) or not. If it is then getting remaining character by subtracting txtLen with maxlen and updating <span id='remain'> text.

keydown – Using this event only for disabling more input when Textarea character length reaches its maximum.

Completed Code

$(document).ready(function(){
 var maxlen = 140;
 $("#txt_tweet").keyup(function(e){
 
  // Finding total characters in Textarea
  var txtLen = $(this).val().length;
 
  if(txtLen <= maxlen){
   var remain = maxlen - txtLen;
 
   // Updating remaining character count
   $("#remain").text(remain);
  }
 });


 $("#txt_tweet").keydown(function(e){
  var keycode = e.keyCode;

  // Finding total characters in Textarea 
  var txtLen = $(this).val().length;
 
  if(txtLen > maxlen){
 
   // when keycode is not of backspace
   if(keycode != 8){
     // Stopping new character to enter
     // e.preventDefault();
     return false;
   }
  }
 });
});

---

3. CSS

/* Container */
.container{
 margin: 0 auto;
 width: 70%;
}

.content{
 width: 400px;
 border: 1px solid gray;
 margin: 0 auto;
 padding: 5px;
 border-radius: 3px;
}

.content div{
 text-align: right;
}
#txt_tweet{
 min-width: 98%;
 max-width: 98%;
 min-height: 120px;
 max-height: 120px;
 font-size: 18px;
 letter-spacing: 1px;
 padding: 3px;
 color: gray;
}
#remain{
 color: gray;
}

#tweet{
 padding: 5px 10px;
 color: white;
 border: 0;
 background-color: #1b95e0;
 letter-spacing: 1px;
 font-size: 16px;
}

---

4. Demo

---

5. Conclusion

In the demonstration, example defined keyup and keydown events on the Textarea element.

The keyup event is used for updating remaining character count and the keydown event is used to stop Textarea from taking another character input.