Creating a Twitter Like TextBox Character Warning Using jQuery

The other day I gave an intro to jQuery Lunch and Learn to my client's development team. I walked them through creating a simple jQuery Plugin to create a character remaining feature like Twitter has on its web site.

The ingredients for this plugin involved a textarea field (but you could just use an input field if you really wanted) and assigning the plugin to the textarea.

<

script

src

="jquery.limitcharacters.js"

type

="text/javascript"

></

script

>

1:

 

2:

<script type=

"text/javascript"

>

3:

$(document).ready(

function

() {

4:

 

5:

$(

'#txtWhatAreYouDoing'

).limitCharacters();

6:

 

7:

});

</

script

>

<

textarea

id

="txtWhatAreYouDoing"

name

="txtWhatAreYouDoing"

cols

="50"

rows

="3"

></

textarea

>

The plugin itself is composed of what I think of as 3 segments. The first allows you to define options, which as then mapped to an internal JavaScript object called settings with default values defined.

// Default settings

var

settings = { charLimit: 50, showRemaining:

true

, remainingClass:

'remainingChars'

, remainingWarnClass:

'remainingCharsWarn'

};

if

(options) { $.extend(settings, options);}

The next section simply appends a SPAN to display the remaining characters as the user types in the field.

this

.after(

"<span id='CharsLeft'></span>"

);

Now the real guts of the plugin! It intercepts the keyup event of the textarea and counts the number of characters used. If the number of characters is over the limit (settings.charLimit) it truncates to the maximum number of characters.

this

.keyup(

function

() {

var

len = $(

this

).val().length;

if

(len > settings.charLimit) {

this

.value =

this

.value.substring(0, settings.charLimit); }...}

Next it gets the number of characters left and sets the value of the SPAN added earlier.

var

charsLeft = settings.charLimit - len;

if

(charsLeft < 0) { charsLeft = 0;}$(

'#CharsLeft'

).text(charsLeft +

" characters left"

);

Finally it sets the style of the remaining character SPAN by determining if there are fewer than 10 characters remaining. It does this by leveraging the hasClass, addClass and removeClass jQuery utility methods.

if

((settings.charLimit - len) > 10) {

if

(!$(

'#CharsLeft'

).hasClass(settings.remainingClass)) { $(

'#CharsLeft'

).addClass(settings.remainingClass); }

if

($(

'#CharsLeft'

).hasClass(settings.remainingWarnClass)) { $(

'#CharsLeft'

).removeClass(settings.remainingWarnClass); }}

else

{

if

(!$(

'#CharsLeft'

).hasClass(settings.remainingWarnClass)) { $(

'#CharsLeft'

).addClass(settings.remainingWarnClass); }}

The CSS classes used look like this:

.remainingChars

{

font-family

: Arial, Helvetica, sans

-serif;

font-size

:

2.5em;

font-weight

:

bold;

color

:

#666666;

}

.remainingCharsWarn

{

color

:

#660033;

}

Putting it all together gives us a nice little plugin.

The full plugin source:

jQuery.fn.limitCharacters = 

function

(options) {

if

(

this

.length == 0)

return

;

// Default settings

var

settings = { charLimit: 50, showRemaining:

true

, remainingClass:

'remainingChars'

, remainingWarnClass:

'remainingCharsWarn'

};

if

(options) { $.extend(settings, options); }

this

.after(

"<span id='CharsLeft'></span>"

);

this

.keyup(

function

() {

var

len = $(

this

).val().length;

if

(len > settings.charLimit) {

this

.value =

this

.value.substring(0, settings.charLimit); }

var

charsLeft = settings.charLimit - len;

if

(charsLeft < 0) { charsLeft = 0; } $(

'#CharsLeft'

).text(charsLeft +

" characters left"

);

if

((settings.charLimit - len) > 10) {

if

(!$(

'#CharsLeft'

).hasClass(settings.remainingClass)) { $(

'#CharsLeft'

).addClass(settings.remainingClass); }

if

($(

'#CharsLeft'

).hasClass(settings.remainingWarnClass)) { $(

'#CharsLeft'

).removeClass(settings.remainingWarnClass); } }

else

{

if

(!$(

'#CharsLeft'

).hasClass(settings.remainingWarnClass)) { $(

'#CharsLeft'

).addClass(settings.remainingWarnClass); } }

return

this

; });}

Share This Article With Your Friends!