jQuery Plugin For Character Limit with An Visual Cue - Novelist
File Size: | 266 KB |
---|---|
Views Total: | 533 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Novelist is an user-friendly jQuery character limit plugin that limits the amount of text that is permitted in textareas or input fields, with a visual cue to indicator how much content can still be entered as the user types.
The plugin is dual licensed under the MIT and GPL licenses.
Basic usage:
1. Include jQuery library and the jQuery novelist plugin in the document.
<script src="jquery.min.js"></script> <script src="jquery.novelist.js"></script>
2. Create an input filed or a textarea in the document.
<input type="text" id="demo" value="" name="demo">
3. The javascript to limit the max characters allowed in the input field with a callback event.
$('#demo').novelist({ maxCharacters: 15, direction: 'horizontal', onLimitReached: changeBorderColor }); function changeBorderColor() { $this = $(this); $this.addClass('character-limit-reached'); setTimeout(function () { $this.removeClass('character-limit-reached'); }, 500); }
4. The sample CSS to style the input field.
input { font-size: 15px; border: 1px solid #dedede; width: 600px; max-width: 600px; min-width: 600px; padding: 8px; outline: none; -moz-box-shadow: inset 2px 2px 3px #efefef; -webkit-box-shadow: inset 2px 2px 3px #efefef; box-shadow: inset 2px 2px 3px #efefef; -webkit-transition: background-position 200ms ease, border-color 200ms ease; -moz-transition: background-position 200ms ease, border-color 200ms ease; -o-transition: background-position 200ms ease, border-color 200ms ease; } input:focus { border: 1px solid #bbbbbb; } input.character-limit-reached, textarea.character-limit-reached { border: 1px solid red; }
5. All the default settings.
// maximum character limit maxCharacters:100, // truncate characters that go over the limit hardLimit:true, // custom background image backgroundImage:'', // should the background image be scaled to textarea/text field dimensions (CSS3)? backgroundScale:false, // vertical or horizontal? direction:'vertical', // callback fired on input onInput:function (value, characters, percent, limit) { }, // callback fired when the maximum character limit is reached onLimitReached:function (value) { }
This awesome jQuery plugin is developed by antennaio. For more Advanced Usages, please check the demo page or visit the official website.