Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Page History: Characters Left - JavaScript

Compare Page Revisions



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

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



ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.