<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> Based off of <a href="http://bootsnipp.com/snippets/featured/twitter-like-message-box">twitter-like message box</a>. </div> <hr /> <div class="container"> <div class="row"> <div class="span4 well" style="padding-bottom:0"> <form accept-charset="UTF-8" action="" method="POST"> <textarea class="span4" id="new_message" name="new_message" placeholder="Type in your message" maxlength="320" rows="5"></textarea> <h6 class="pull-right"><span id="characters_remaining">320</span> characters remaining</h6> <button class="btn btn-info" type="submit">Post New Message</button> </form> </div> </div> </div>

$("#new_message").on('input propertychange paste', function() { var length = $("#new_message").val().length; var remaining = $("#new_message").attr("maxlength") - length; $("#characters_remaining").html(remaining) });