Useful Javascript Snippets

Useful Javascript Snippets

Well just as the title says, those are some Javascript snippets that I find useful.

TextLimiter

About

This is a little class that I wrote for limiting the number of characters in a text input or a textarea. It will show a countdown of the characters left and prevent you from writing more than the desired amount of chars. Some of the features:

  • Cross-Browser
  • Uses it's custom "change" event, so that it works when pasting text too.
  • It's cool

How to use it

Just grab the source below, and paste it in an empty text document…save it as textlimiter.js or something meaningful, and include it in any page where you might need it like this:

<script type="text/javascript" src="textlimiter.js"></script>

After that just create a new TextLimiter object and pass the required parameters, like this:

var myLimiter = new TextLimiter('myText', {charLimit: 400});

And you're done!

Parameters and Options

TextLimiter takes 2 parameters: The id of your text element or the text element itself is the first parameter. The second one is an object representing the options, the available options are described below:

Options

charLimit
The limit of allowed characters (Int, Default: 100)
message
The message displayed next to the remaining characters (String, Default: ' chars left')
addLineBreak
If set to true, the remaining characters countdown will be displayed under your text element, if not it will be next to it (Bool, Default: true)
interval
At which interval (in milliseconds) to check if the text has changed (Int, Default: 200)

And that's it! You're ready to rock with your new character-limited text area! Isn't it awesome?? Oh wait… without the code it's not that awesome so here it is:

Code

//TextLimiter by Jean-Nicolas Jolivet
//Copyright (c) 2008 http://www.silverscripting.com
//MIT License:  http://www.opensource.org/licenses/mit-license.php
 
var TextLimiter = function (el, options) {
    this.message = options.message || " chars left";
    this.el = (typeof el === 'string') ? document.getElementById(el) : el;
    this.charLimit = options.charLimit || 100;
    this.interval = options.interval || 200;
    this.addLineBreak = options.addLineBreak || true;
 
    this.buildElements();
 
};
 
TextLimiter.prototype.buildElements = function() {
    var parentEl = this.el.parentNode;
    var that = this;
 
    this.charCountEl = document.createElement('span');
    this.charCountEl.className = 'textlimiter';
    this.charCountEl.innerHTML = this.charLimit + this.message;
    if(this.addLineBreak) {
        var lineBreak = document.createElement('br');
        parentEl.insertBefore(lineBreak, this.el.nextSibling);
        parentEl.insertBefore(this.charCountEl, lineBreak.nextSibling);
    }
    else {
        parentEl.insertBefore(this.charCountEl, this.el.nextSibling);
    }
    this.oldCharCount = this.el.value.length;
    this.el.onfocus = function() {
        that.intervalTimer = setInterval(function(){that.dispatchChangeEvent();}, that.interval);
    };
 
    this.el.onblur = function() {
        clearTimeout(that.intervalTimer);
    };
 
};
 
TextLimiter.prototype.dispatchChangeEvent = function() {
    if(this.oldCharCount != this.el.value.length) {
 
        var newCharCount = this.el.value.length;
        var charCnt = this.charLimit - newCharCount;
        if (charCnt <= 0) {
            this.el.value = this.el.value.substr(0, this.charLimit);
            charCnt = 0;
        }
        this.charCountEl.innerHTML = charCnt + this.message;
    }
    this.oldCharCount = this.el.value.length;
};
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License