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