Tips (Total 4)
# Tips-1) List of Keyboard Events Attribute
Keyboard Events
| Attribute | Value | Description |
|---|---|---|
| onkeydown | script | Fires when a user is pressing a key |
| onkeypress | script | Fires when a user presses a key |
| onkeyup | script | Fires when a user releases a key |
# Tips-2) What is HTML onkeydown Event Attribute
The
onkeydown event attribute in HTML is a global event attribute that triggers a script when a user presses a key on the keyboard. This event fires as soon as the key is pressed down, before it is released.Example of HTML onkeydown Event Attribute
It will Execute a JavaScript when a user is pressing a key.
index.html
Example:
HTML
<input type="text" onkeydown="myFunction()">
Output should be:
Definition and Usage of HTML onkeydown Event Attribute
The onkeydown attribute fires when the user is pressing a key (on the keyboard).
Tip: The order of events related to the onkeydown event:
- onkeydown
- onkeypress
- onkeyup
Browser Support of HTML onkeydown Event Attribute
img
Syntax of HTML onkeydown Event Attribute
<element onkeydown="script">
Attribute Values of HTML onkeydown Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onkeydown |
Technical Details of HTML onkeydown Event Attribute
| Supported HTML tags: | All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
|---|
How to Execute a JavaScript when a user is pressing a key
A function is triggered when the user is pressing a key in the input field.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>
Output should be:
How to Use "onkeydown" together with the "onkeyup" attribute
Press and hold down a key inside the text field to set a red background color. Release the key to set a green background color.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p>Press and hold down a key inside the text field to set a red background color. Release the key to set a green background color.</p>
<input type="text" id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
<script>
function keydownFunction() {
document.getElementById("demo").style.backgroundColor = "red";
}
function keyupFunction() {
document.getElementById("demo").style.backgroundColor = "green";
}
</script>
</body>
</html>
Output should be:
# Tips-3) What is HTML onkeypress Event Attribute
The
onkeypress event attribute in HTML triggers a script when a user presses a key on the keyboard. This attribute is typically used within HTML elements that can receive keyboard input, such as <input> fields or <textarea> elements.Example of HTML onkeypress Event Attribute
It will Execute a JavaScript when a user presses a key.
index.html
Example:
HTML
<input type="text" onkeypress="displayResult()">
Output should be:
Definition and Usage HTML onkeypress Event Attribute
The onkeypress attribute fires when the user presses a key (on the keyboard).
Tip: The order of events related to the onkeypress event:
- onkeydown
- onkeypress
- onkeyup
Note: The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use onkeydown instead, because it works for all keys
Browser Support of HTML onkeypress Event Attribute
img
Syntax of HTML onkeypress Event Attribute
<element onkeypress="script">
Attribute Values of HTML onkeypress Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onkeypress |
Technical Details of HTML onkeypress Event Attribute
| Supported HTML tags: | All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
|---|
How to Execute a JavaScript when a user presses a key
A function is triggered when the user is pressing a key in the input field.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>
Output should be:
# Tips-4) What is HTML onkeyup Event Attribute
The HTML
onkeyup event attribute is used to execute a script or function when a user releases a key on the keyboard. This attribute can be applied to various HTML elements, commonly input fields and text areas, to enable dynamic responses to user input.
Example of HTML onkeyup Event Attribute
It will Execute a JavaScript when a user releases a key.
index.html
Example:
HTML
<input type="text" onkeyup="myFunction()">
Output should be:
Definition and Usage of HTML onkeyup Event Attribute
The onkeyup attribute fires when the user releases a key (on the keyboard).
Tip: The order of events related to the onkeyup event:
- onkeydown
- onkeypress
- onkeyup
Browser Support of HTML onkeyup Event Attribute
Output should be:
Syntax of HTML onkeyup Event Attribute
<element onkeyup="script">
Attribute Values of HTML onkeyup Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onkeyup |
Technical Details of HTML onkeyup Event Attribute
| Supported HTML tags: | All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
|---|
How to Execute a JavaScript when a user releases a key
A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
let x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Output should be:
