HTML onkeyup Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The onkeyup HTML event attribute is fired when the user releases a key on the keyboard. It can be used on any HTML element except <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>.

The onkeyup attribute takes a JavaScript expression as its value, which is executed when the event is fired. The expression can be used to perform any kind of operation, such as updating the text of an element, submitting a form, or playing a sound.

Here is an example of how to use the onkeyup attribute:

<input type="text" onkeyup="myFunction()">

In this example, the myFunction() function will be executed when the user releases a key in the <input> element.

The onkeyup event can be used for a variety of purposes, such as:

  • Validating user input
  • Autocompleting text fields
  • Implementing keyboard shortcuts
  • Playing games
  • Creating interactive animations

Here is an example of how to use the onkeyup event to validate user input:

<input type="text" onkeyup="validateInput()">

function validateInput() {
  var input = document.querySelector('input');
  var value = input.value;

  if (value.length < 5) {
    input.style.borderColor = 'red';
  } else {
    input.style.borderColor = 'green';
  }
}

In this example, the validateInput() function is executed whenever the user releases a key in the <input> element. The function checks if the input value is at least 5 characters long. If it is not, the function sets the border color of the <input> element to red. Otherwise, the function sets the border color to green.

Syntax

<element onkeyup="script">

Values

  • scriptThe name of the script to use when the event has been triggered.

Example

<!DOCTYPE html>
<html>
<head>
<title>Event Attribute onkeyup</title>
</head>
<body>
<p>To demonstrate the onkeyup event attribute, enter your name. This script converts all letters to uppercase (often used in this way when specifying bank data).</p>
<p>Enter your name:</p>
<input type="text" id="name" onkeyup="keyboardTest()">
<script>
function keyboardTest() {
var x = document.getElementById("name")
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

Browser Support

The following table will show you the current browser support for the HTML onkeyup Event Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 8th October 2023