bootstrap-maxlength Demo

Example for a twitter bootstrap maxlength plugin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://rawgit.com/kaiwa/bootstrap-maxlength/master/bootstrap-maxlength.js"></script>
<body style="padding-top: 5em">
  <div class="container">
    <h1>Simple Bootstrap Maxlength Plugin</h1>
    <h3>
      <a href="https://github.com/kaiwa/bootstrap-maxlength">github.com/kaiwa/bootstrap-maxlength</a>
    </h3>
    
    <p>
      Demo showing the functionality of the twitter bootstrap maxlength plugin.
    </p>
    
    <div id="form-row" class="row">
      <div class="col-xs-6">
        <form>
          <label for="example">Start typing to see characters left</label>
          <input id="example" class="form-control" type="text" maxlength="20" placeholder="Max. 20 chars" />
        </form>
      </div>
    </div>
  </div>
</body>

CSS

/** No CSS needed, this is just for styling the demo **/

body { padding-top: 5em; }
h3 { padding-top: -1em; padding-bottom: 1em; }
#form-row { padding-top: 2em; }

JavaScript

/** Make sure to add the bootstrap-maxlength.js file to your html **/

$(document).ready(function() {
  $("input[maxlength]").maxlength();
});