Textarea with character count

This bootstrap snippet called "Textarea with character count" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: count,validation,form

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="col-sm-4 well">
    <form accept-charset="UTF-8" action="" method="POST">
        <textarea class="form-control" id="text" name="text" placeholder="Type in your message" rows="5"></textarea>
        <h6 class="pull-right" id="count_message"></h6>
        <button class="btn btn-info" type="submit">Post New Message</button>
    </form>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

#text {
    resize: none;
    margin-botton:10px;
}
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview

var text_max = 200;
$('#count_message').html(text_max + ' remaining');
  $('#text').keyup(function() {
  var text_length = $('#text').val().length;
  var text_remaining = text_max - text_length;
  $('#count_message').html(text_remaining + ' remaining');
}); 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jun 1st 2014, 19:45

Views: 3.8K

Rated 5/5 based on 3 reviews