JavaScript Keyboard Events
Keyboard events occur when the user presses or release a keyboard key. Keyboard event is DOM version 2.
| Event | Description |
|---|---|
| onkeydown | The onkeydown event occurs when the user pressed a key down from the keyboard. |
| onkeypress | The onkeypress event occurs when the user presses a key from the keyboard. |
| onkeyup | The onkeyup event occurs when the user releases a key from the keyboard. |
JavaScript onkeyup event
Example 1: Enter color name to change textbox backcolor using JavaScript onkeyup event. 1
Textbox Background will automatically change as you type.
<body>
<p>Textbox Background will automatically change as you type.</p>
<input type="text" id="t1" onkeyup="funKeyUp()">
<script>
function funKeyUp() {
t1.style.backgroundColor = t1.value;
}
</script>
</body>
Example 2: Convert letter into capital, JavaScript onkeyup event. 1
The function transforms the character to upper case as you type.
Enter Name:<body>
<p>The function transforms the character to upper case as you type.</p>
Enter Name: <input type="text" id="t2" onkeyup="funCapital()">
<script>
function funCapital() {
t2.value = t2.value.toUpperCase();
}
</script>
</body>
Example 3: Convert letter into capital, JavaScript onkeydown event. 1
Enter Your Name, it will automatically converted into capital letters.
<body>
<p>Enter Your Name, it will automatically converted into capital letters.</p>
<input type="text" id="t3" onkeydown="capital()">
<p id="output"></p>
<script>
function capital() {
output.innerHTML = t3.value.toUpperCase();
}
</script>
</body>
Example 4: JavaScript onfocus, onblur event.
Example 5: Change document backcolor using HTML select element.
<body>
<form name="f1" action="">
<select name=a onchange="color()">
<option value="White">Select Color</option>
<option value="Red">red </option>
<option value="Green">green </option>
<option value="Purple">purple </option>
<option value="Blue">blue </option>
</select>
</form>
<script>
function color() {
if (f1.a.value != "white")
document.bgColor = f1.a.value;
else
document.bgColor = f1.a.value;
}
</script>
</body>
Ad:
