"SMS Box"
Bootstrap 3.3.0 Snippet by tejlavwaladhaval

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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"> <div> <br style="clear:both"> <div class="form-group col-md-4 "> <label id="messageLabel" for="message">Message </label> <textarea class="form-control input-sm " type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea> <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span> </div> <br style="clear:both"> <div class="form-group col-md-2"> <button class="form-control input-sm btn btn-success disabled" id="btnSubmit" name="btnSubmit" type="button" style="height:35px"> Send</button> </div> </div>
.red{ color:red; }
$(document).ready(function(){ $('#characterLeft').text('140 characters left'); $('#message').keyup(function () { var max = 140; var len = $(this).val().length; if (len >= max) { $('#characterLeft').text('You have reached the limit'); $('#characterLeft').addClass('red'); $('#btnSubmit').addClass('disabled'); } else { var ch = max - len; $('#characterLeft').text(ch + ' characters left'); $('#btnSubmit').removeClass('disabled'); $('#characterLeft').removeClass('red'); } }); });

Related: See More


Questions / Comments:

Nice! Take care as count acts funny around the 140 value.

Gerard Sans (0) - 2 years ago - Reply 0


good snippet but counter does not work in real time; you should use "keyup" instead of "keydown"
have a good day

nowanswerme (0) - 3 years ago - Reply 0


Great one...

RalphAlex (0) - 3 years ago - Reply 0


Good snippet, it really helps.

Dieudonné Dipa Tshiauke (0) - 3 years ago - Reply 0