HTML onkeyup Event Attribute

If this site has been useful, we’d love your support! 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

HTML

<!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>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML onkeyup event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.