Page History: Characters Left - JavaScript

Compare Page Revisions

2 1 0 Current 2 1 0

« Older Revision - Back to Page History - Current Revision

Page Revision: Wed, Aug 17, 2011, 3:32 PM

Overview¶

As a convenience to the user, especially on longer input fields, a web page can show the number of characters remaining before the user hits the maximum number of characters allowed in a field. This article demonstrates a way to implement this feature.

Dependencies¶

• jQuery
• Input fields can be an <input> or a <textarea>, but must have a maxlength attribute.
  

Sample Code¶

HTML¶

<input type='text' maxlength='50' id='FirstName' />
<div id='FirstNameCharsLeft'></div>

JavaScript¶

/*------------------------------------------------------------------------------------------------*/
$(document).ready(function(){
    setInterval("timerClick()", 300);
});
/*------------------------------------------------------------------------------------------------*/
function timerClick(){
    showCharsLeft('#FirstName', '#FirstNameCharsLeft');
}
/*------------------------------------------------------------------------------------------------*/
function showCharsLeft(inputSelector, outputSelector) {

    var inputField = $(inputSelector);
    var maxLength = inputField.attr('maxlength');

    if (maxLength != undefined) {
        var length = inputField.val().length;
        var charsLeft = maxLength - length;
        $(outputSelector).html(charsLeft + " character(s) left");
    }

}
/*------------------------------------------------------------------------------------------------*/