onkeyup
onkeyup event
The onkeyup event attribute triggers a JavaScript function when a key is released on the keyboard. It is often used to capture user input and update the interface in real-time.
onkeypress event is now deprecated and may not work consistently across all browsers. It does not trigger for certain keys like ALT, CTRL, SHIFT, and ESC in some environments.For reliable key detection, it's recommended to use the onkeydown event instead, as it captures all key presses effectively.Syntax
In HTML
<element onkeyup="myScript">
In JS
object.onkeyup = function(){myScript};
In JavaScript, the addEventListener() function is used.
object.addEventListener("keyup", myScript);
Example
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The keyup Event</h2>
<p>A function is triggered when the user releases a key in the input field.</p>
<p>The function transforms the input field 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>
Value
Conclusion
The onkeyup event is a useful tool for capturing user input as keys are released. It enables developers to create responsive interfaces by dynamically updating content based on user actions, enhancing the overall interactivity of web applications.
onkeypress
The onkeypress event in HTML is activated when a key is pressed and released, enabling developers to capture character input for interactive features or actions.
Media
HTML media event attributes handle events related to media elements like audio and video, enabling control over playback, loading, and other media interactions.