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.
<noscript>
<font color='#CF0000'>
<b>You do not have JavaScript enabled in your browser.</b>
</font>
</noscript>
<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)
{
txt.style.background = '#F0F0F0';
return false;
}
txt.style.background = '';
return true;
}
function zShow(id, vis)
{
// Show/hide an element
var elem = document.getElementById(id);
elem.style.visibility = (vis ? 'visible' : 'hidden');
}
//-->
</script>
<!-- Text -->
<p>
<b>Comments:</b>
<input name='zCommentsCnt' type='text'
style='width:30; display:inline; visibility:hidden'
value='' readonly>
<br/>
<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='this.style.background = ""; zShow("zCommentsCnt", false);'
>Enter comments here.</textarea>
</p>
|
|
Comments:
|