TextArea with Character Counter

By David R. Tribble
Revision 1.1, 2007-11-07


The JavaScript code below defines an modifiable text ares in which the user can enter characters. The field is limited to accepting no more than 100 characters. Once the user has entered 99 characters, typing another character causes the field to be colored gray and further character entry is disabled. Deleting a character in the field re-enables character editing and restores the original background color to the field. Clicking on the text field causes a character counter to be displayed, showing the remaining number of characters that can be entered in the field.

The maxlength and rows attributes of the textarea entity can be modified appropriately to suit the needs of a web page application.


Newlines entered into the field occupy two character positions (i.e., each newline is encoded as a CR and LF pair).

Cut-and-paste operations (e.g., the Ctrl-C and Ctrl-V hotkeys) may not work quite as expected in some browsers. For example, MS Internet Explorer 7 allows the user to paste characters in the text field beyond the 100 character limit. Multiple paste operations do not seem to be affected by the programmatic limit enforced by the zTextEntry function. In such situations, the field remains grayed-out until enough characters have been deleted so that there are less than 100 characters in the field.

Source Code

 <font color='#CF0000'>
 <b>You do not have JavaScript enabled in your browser.</b>

<script type='text/javascript' language='JavaScript'>
  function zTextEntry(txt, cnt)
    // Update the text length counter
    var elem = document.getElementById(cnt);
    elem.value = (txt.maxlength - txt.value.length);

    // Enforce the maximum text length
    if (txt.value.length >= txt.maxlength)
    { = '#F0F0F0';
      return false;
    } = '';
    return true;

  function zShow(id, vis)
    // Show/hide an element
    var elem = document.getElementById(id); = (vis ? 'visible' : 'hidden');

<!-- Text -->
<input name='zCommentsCnt' type='text'
  style='width:30; display:inline; visibility:hidden'
  value='' readonly>
<textarea name='zComments' maxlength='100' rows='5'
  style='width:100%' wrap='soft'
  onKeyUp='return zTextEntry(this, "zCommentsCnt");'
  onKeyPress='return zTextEntry(this, "zCommentsCnt");'
  onFocus='zTextEntry(this, "zCommentsCnt"); zShow("zCommentsCnt", true);'
  onBlur=' = ""; zShow("zCommentsCnt", false);'
 >Enter comments here.</textarea>

Rendered Appearance


Copyright ©2007 by David R. Tribble, all rights reserved.
Permission is granted to anyone to link to this document and to quote portions of it without restriction. Source code may be duplicated and used without restriction except by members of organizations designated as terrorist organizations by the U.S. State Department.