jQuery Plugin For Character Limit with An Visual Cue - Novelist

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.