Detecting Textarea Events

To help demonstrate how the onKeyDown, onKeyPress, onKeyUp, and onChange Events work, in particular the order in which they fire, the example below demonstrates what Events are firing:



<SCRIPT>

function DisplayEvent(eventName) {
     var myMessage = document.form1.textarea2.value;
     myMessage += eventName;
     document.form1.textarea2.value = myMessage;
}

</SCRIPT>

<FORM NAME="form1">
     <TEXTAREA NAME="textarea1" COLS="20" ROWS="10" 
       onChange="DisplayEvent('onChange');"
       onKeyDown="DisplayEvent('onKeyDown');"
       onKeyPress="DisplayEvent('onKeyPress');"
       onKeyUp="DisplayEvent('onKeyUp');">
     </TEXTAREA>
     <TEXTAREA NAME="textarea2" COLS="20" ROWS="10"></TEXTAREA>
     <INPUT TYPE="button" VALUE="Clear Event TextArea" NAME="button1"
       onClick="form1.textarea2.value=''">
</FORM>

See what happens when you type any letter into the first textarea box. You should see the Events being fired listed in the second textarea box (onKeyDown, onKeyPress, onKeyUp). If you click outside of the first textarea box you'll see the onChange Event fire.

Experiment with the example to see what Events fire, and when. Sometimes you will not get quite the results you expect. For example, if you press and hold a key down then in IE and Netscape 6.x onKeyDown and onKeyPress will fire continuously until you let go, when just one onKeyUp Event will fire.

In Netscape 4.x, onKeyDown will fire once, then onKeyPress will fire continuously until you let go, when just one onKeyUp will fire.