March 18, 2015

Twitter like character counter for textareas

Twitter like character counter for textareas

Twitter style character counter shows the character count that you can use to type in for a particular post. The user know they are approaching the limit by seeing the character count displayed. If there are no characters or if the limit exceeds you can't post your text. As the user types the text, the plugin counts unused characters. When a limit is exceeded, the counter goes to a negative value and the button gets disabled.

When there is no text typed inside the textarea the post button will be disabled. Even when the character count exceeds 140 character the post button will be disabled. You can only post if either you have typed in some characters or the character count is less than or equal to 140 characters.


<div class="container">
    <div class="form-group">
      <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
  <div class="button-group pull-right">
    <p class="counter">140</p>
    <a href="#" class="btn btn-primary">Post</a>

  <ul class="posts">
    <!-- Posts will be displayed here -->


body {
  font-family: 'Roboto', sans-serif;
  color: #404040;

.container {
  margin-top: 20px;

.button-group {
  margin-bottom: 20px;

.counter {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 10px;
  color: #eee

.posts {
  clear: both;
  list-style: none;
  padding-left: 0;
  width: 100%;

.posts li {
  background-color: #fff;
  border: 1px solid #d8d8d8;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  word-wrap: break-word;
  min-height: 42px;


var main = function() {
  $('.btn').click(function() {
    var post = $('.status-box').val();
  • ').text(post).prependTo('.posts'); $('.status-box').val(''); $('.counter').text('140'); $('.btn').addClass('disabled'); }); $('.status-box').keyup(function() { var postLength = $(this).val().length; var charactersLeft = 140 - postLength; $('.counter').text(charactersLeft); if(charactersLeft < 0) { $('.btn').addClass('disabled'); } else if(charactersLeft == 140) { $('.btn').addClass('disabled'); } else { $('.btn').removeClass('disabled'); } }); $('.btn').addClass('disabled'); } $(document).ready(main);
  • Attachments:

    I have used external attachments.

    <link href="" rel="stylesheet">
    <link href='' rel='stylesheet' type='text/css'>
    <script src=""></script>

    No comments:

    Post a Comment

    Popular Posts