Jquery Max length

Validation for max length for input type text, textarea etc

by Pankaj Sapkal

HTML

<script src="http://pioul.fr/ext/jquery-maxlength/jquery.maxlength.min.js"></script>
<div class="column">
  <label for="input-1">Input 1: maxlength=50</label>
  <input type="text" maxlength="50" id="input-1" value="Hello there!" />

  <label for="input-2">Input 2: no maxlength attribute</label>
  <input type="text" id="input-2" value="Oh hai!" />

  <label for="textarea-1">Textarea 1: maxlength=50</label>
  <textarea maxlength="50" id="textarea-1"></textarea>

  <label for="textarea-2">Textarea 2: maxlength=100, character counter in the grey div</label>
  <textarea maxlength="100" id="textarea-2"></textarea>

  <label for="input-3">Input 3: maxlength=100, character counter in the grey div, custom text</label>
  <input type="text" maxlength="100" id="input-3" />
</div>
<div class="column">
  <div class="counter-container">
    <p class="header">Counter container for Textarea 2 and Input 3</p>
  </div>
</div>

CSS

body {
  margin: 50px 0 50px 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #333;
  background-color: #fff;
}

.column {
  float: left;
  margin-right: 50px;
}

label {
  display: block;
  font-weight: bold;
}

input,
textarea {
  width: 200px;
  margin-bottom: 30px;
}

input+.maxlength,
textarea+.maxlength {
  position: relative;
  top: -30px;
}

.counter-container {
  width: 300px;
  padding: 20px;
  background: #f3f3f3;
}

.counter-container .header {
  font-weight: bold;
  margin: 0;
}

.counter-container .header,
.counter-container .maxlength {
  margin-bottom: 1em;
}

.counter-container .maxlength:last-child {
  margin-bottom: 0;
}

JavaScript

// basic usage
$("#input-1, #input-2, #textarea-1").maxlength();

// custom counter container
$("#textarea-2").maxlength({
  counterContainer: $(".counter-container")
});

// custom counter container and text
$("#input-3").maxlength({
  counterContainer: $(".counter-container"),
  text: 'Input 3: You have written <b>%length</b> characters, <b>%maxlength</b> are allowed, you have <b><u>%left</u> left</b>.'
});

// subscribe to the "update.maxlength" event
$("input, textarea").bind("update.maxlength", function(event, element, lastLength, length, maxLength, left){
 console.log(event, element, lastLength, length, maxLength, left);
});