Page History: Characters Left - JavaScript

Compare Page Revisions

2 1 0 Current 2 1 0

« Older Revision - Back to Page History - Newer Revision »

Page Revision: Wed, Aug 17, 2011, 3:30 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.

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

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