charactersLeft

charactersLeft

by Shashi Kumar Nagulakonda

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Textarea Characters Left</title>
        

    </head>

    <body>
        <div id="wrapper">
            <p>Try typing in the textarea.</p>
            <textarea id="myTextarea" name="myTextarea"></textarea>
        </div>
    </body>
</html>

CSS

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        color: #666;
    }
body p {
    font-size: 0.75em;
    margin: 0 0 8px;
    line-height: 1.3;    
}
#wrapper {
    width: 200px;
    margin: 20px auto;
    
}
#myTextarea {
    color: #666;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    line-height: 1.3;
    width: 200px;
    height: 70px;
}
.charsLeft {
    font-size: 0.69em;
    line-height: 1.4;
    }
.charsLeft span {font-weight: 700;}
.charError {
    background: #FF6F6F;
}

JavaScript

(function($){
    $.fn.charsLeft = function(customOptions){
        //Merge default and user options
        var options = $.extend({}, $.fn.charsLeft.defaultOptions, customOptions);
        return this.each(function(i){
            var $this = $(this);
            
            //Construct our HTML
            var charHTML = "<div class='" + options.wrapperClass + "'>";
            charHTML += options.charPrefix;
            charHTML += " <span class='" + options.countClass + "'>" + options.maxChars + "</span> ";
            charHTML += options.charSuffix;
            charHTML += "</div>";
            
            //Attach our HTML
            switch(options.attachment){
                case "before":
                    $this.before(charHTML);
                    break;
                case "after":
                    $this.after(charHTML);
                    break;
                default:
                    $this.after(charHTML);
                    break;
            }
            
            //Cache the char count
            $charCount = $("." + options.countClass);
            
            //Look at the length / what's left
            var messageLength = $this.attr("value").length;
            var messageCharsLeft = options.maxChars - messageLength;
            
            //On reload, if teaxtarea is filled, update value
            if(messageLength){
                $charCount.text(messageCharsLeft);
            }
            
            //Bind the update on textarea keyup
            $this.bind("keyup.charsLeft", function(){
                messageLength = $this.attr("value").length;
                messageCharsLeft = options.maxChars - messageLength;
                $charCount.text(messageCharsLeft);
                
                //Add error class if to many chars
                (messageCharsLeft < 0) ? $this.addClass(options.errorClass) : $this.removeClass(options.errorClass);
            });
        });
    };
    
    //Set our plugin...