jQuery.maxlength demo

More information, documentation and download on the project's page : http://pioul.fr/jquery-maxlength

by pioul

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);
});