OnKeyDown, OnKeyUp, OnClick, and OnChange JavaScript Events

The JavaScript events onkeydown, onkeyup, onclick and onchange can be used to make something happen when the user changes or types something into a form field.

Each of those 4 events are described further below.

When one of the four events occurs, it can trigger an action. The action might be to

• error check a form field,
• update form field totals,
• use Ajax to submit to a form handling script on the server,
• spawn an alert message,

or pretty much anything else JavaScript can do.

The way to trigger an action is to specify the event in relation to a JavaScript function name. The specified function contains the code for the desired action. In this article, we'll assume the function name is AnEventHasOccurred().

Interactive Demonstration

The interactive demonstration on the right immediately below this paragraph updates the textarea field whenever an event is triggered. The textarea field at the bottom of the demonstration is the events monitor. The events monitor contains information about each of the other fields.

• onkeydown — As soon as the keyboard key is pressed, the event is triggered. The event is triggered before the character is typed into the form field.

  Example: onkeydown="AnEventHasOccurred()"

  The triggered action is the update of the textarea box at "A:" with the content of this field. Because the event is triggered before the character is typed, the character you are about to type is not included in the textarea box.

• onkeyup — As soon as the keyboard key is released, the event is triggered. The event is triggered after the character is typed into the form field.

  Example: onkeyup="AnEventHasOccurred()"

  The triggered action is the update of the textarea box at "B:" with the content of this field, including the character you just typed.

• onchange — The event is triggered when a field has changed. This is especially useful for dropdown lists. As soon as a new selection is made, the event is triggered.

  Example: onchange="AnEventHasOccurred()"

  The triggered action is the update of the textarea box at "C:" with the value of the selected item.

  If used in a text field, the event will not be triggered until the mouse is clicked somewhere outside the field. That's because so long as the field is in focus, the JavaScript doesn't know whether or not you are done typing.

  The triggered action is the update of the textarea box at "D:" with the content of the field. However, it will update only after the mouse is clicked somewhere outside the field.

• onclick — The event is triggered when the field is clicked on. This is especially useful for radio buttons and checkboxes. As soon as the click happens, the event is triggered.

  Example: onclick="AnEventHasOccurred()"

  The triggered action for the radio button is the update of the textarea box at "E:" with the value of the checked item. If neither is checked, "[neither]" is printed.

  The triggered action for the checkbox is the update of the textarea box at "F:" with either the word "checked" or "unchecked" depending on whether or not the checkbox is checked.

Each of the 4 events described in this article are recognized as events at different times. Here is the source code of the above interactive demonstration.

<form style="margin:0;">
<p style="margin:0;"><b>A:</b> onkeydown -</p>
<input type="text" id="onkeydown" style="width:148px;" onkeydown="AnEventHasOccurred()">
<p style="margin:0;"><b>B:</b> onkeyup -</p>
<input type="text" id="onkeyup" style="width:148px;" onkeyup="AnEventHasOccurred()">
<p style="margin:0;"><b>C:</b> onchange -</p>
<select id="selectone" onchange="AnEventHasOccurred()">
<option value=""></option>
<option value="Green">Green</option>
<option value="Gold">Gold</option>
<option value="Silver">Silver</option>
</select>
<p style="margin:0;"><b>D:</b> onchange -</p>
<input type="text" id="onchange" style="width:148px;" onchange="AnEventHasOccurred()">
<p style="margin:0;"><b>E:</b> onclick -</p>
<input type="radio" id="onclickyes" name="yesno" onclick="AnEventHasOccurred()">Yes 
<input type="radio" id="onclickno" name="yesno" onclick="AnEventHasOccurred()">No
<p style="margin:0;"><b>F:</b> onclick -</p>
<input type="checkbox" id="onclickcheck" onclick="AnEventHasOccurred()">Checker
<p style="margin:0;">Events monitor:</p>
<textarea id="eventlog" style="width:148px; height:120px; border:1px dotted black; padding:5px;" readonly="readonly" wrap="off" onclick="alert('Monitor box may not be edited.')"></textarea>
</form>

<script type="text/javascript">
function AnEventHasOccurred() {
var sel = document.getElementById("selectone");
document.getElementById("eventlog").value = "" + 
"A:" + document.getElementById("onkeydown").value + "\n" +
"B:" + document.getElementById("onkeyup").value + "\n" +
"C:" + sel.options[sel.selectedIndex].value + "\n" +
"D:" + document.getElementById("onchange").value + "\n" +
"E:" + (document.getElementById("onclickyes").checked ? 'Yes' : (document.getElementById("onclickno").checked ? 'No' : '[neither]') ) + "\n" +
"F:" + (document.getElementById("onclickcheck").checked ? 'checked' : 'unchecked');
}
</script>

The JavaScript events onkeydown, onkeyup, onclick, and onchange can all be used to make something happen when the user uses a form.

When one of those occurs, it can trigger pretty much any action JavaScript is capable of performing.

Will Bontrager