JavaScript - onkeyup event example

2 contributors

7 contributions

0 discussions

0 points

Created by:

Zayyan-Todd

860

In this article, we would like to show you onkeyup event example in JavaScript.

Quick solution:

var myElement = document.querySelector('#my-element');

myElement.addEventListener('keyup', function() {
    console.log('onkeyup event occurred.');
});

or:

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

or:

var myElement = document.querySelector('#my-element');

myElement.onkeyup = function() {
    console.log('onkeyup event occurred.');
};

Practical examples

There are three common ways how to use onkeyup event:

with event listener,
with element attribute,
with element property.

1. Event listener based example

In this section, we want to show how to use onkeyup event on input element via event listener mechanism.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <p>Type something: </p>
    <input type="text" id="my-input">
    <script>
      var myInput = document.querySelector('#my-input');

      myInput.addEventListener('keyup', function() {
        console.log('onkeyup event occurred.');
      });
    </script>
  </body>
</html>

2. Attribute based example

In this section, we want to show how to use onkeyup event on input element via attribute.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <p>Type something: </p>
    <input type="text" onkeyup="handleKeyup()">
    <script>
      function handleKeyup(){
        console.log('onkeyup event occurred.');
      }
    </script>
  </body>
</html>

3. Property based example

In this section, we want to show how to use onkeyup event on input element via property.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <p>Type something: </p>
    <input type="text" id="my-input">
    <script>
      var myInput = document.querySelector('#my-input');

      myInput.onkeyup = function() {
        console.log('onkeyup event occurred.');
      };
    </script>
  </body>
</html>