input length limiter (soft limit)

twitter style with negative length message

by John Allan

HTML

<div id="editor" contenteditable="true"></div>

<p><a href="#remove" id="remove">remove input length limiter (functional test only)</a></p>

CSS

#editor{
    width:400px;
    min-height:100px;
    border:1px solid black;
    padding:10px;
}
#editor.invalid{
    border:2px solid red;     
}
.error{
color:#FF0000;        
}
.hidden{
    display:none;            
}

JavaScript

/*  hcfInputLengthGuide jquery plugin
    by: John Allan
    for: habanero
    on: April 02 2012

    $().hcfInputLengthGuide();                  (instantiates the plugin, adds classes and message container)
    $().hcfInputLengthGuide('remove');          (removes classes, events and elements)

    'maxLength':                                '1000',                                 (max character lenght of message)
    'showMessageThreshold':                     '100',                                  (messages appears when this number of characters is remaining)
    'messageHideClass':                         'hcf-VisibilityHidden',                 (class to hide message)
    'messageContainerClass':                    'hcf-InputLengthMessage',               (class for message wrapper)
    'defaultMessage':                           '{0} character maximum',                (starting message when field is empty)
    'maxMessage':                               'You have {0} characters remaining',    (plural characters remaining message)
    'maxMessageSingular':                       'You have {0} character remaining',     (singular character remaining message)
    'invalidClass':                             'hcf-Invalid'                           (class added to input when maxLength is exceeded)
    'invalidMessageClass':                      'hcf-Error'                             (class added to message when maxLength is exceeded)

*/

(function($){

  var methods = {
    init : function (options) { 
        
        var settings = $.extend( {
            maxLength: 50,
            showMessageThreshold: 20,
            messageHideClass: 'hidden',
            messageContainerClass: 'inputLengthMessage',
            defaultMessage: '{0} character maximum',
            maxMessage: 'You have {0} characters remaining',
            maxMessageSingular: 'You have {0} character remaining',
            invalidClass: 'invalid',
            invalidMessageClass: 'error' 
    ...