Skip to content
Advertisements

JavaScript Keyboard Events

onkeydown event

The JavaScript onkeydown property occurs when the user presses a key.

Syntax:

HTML Attribute<element onkeydown = “handler(event)“>
Event Propertyobject.onkeydown = handler;
attachEvent Methodobject.attachEvent(“onkeydown“, handler)
addEventListener Methodobject.addEventListener(“keydown“, handler, useCapture)

onkeydown Examples

Example 1

onkeydown example 1
<body>   
    <input type="text" onkeydown="keyFunction()" />    
    <script>
        function keyFunction() {
            alert("onkeydown event worked successfully");
        }
    </script>
</body>

Example 2

onkeydown example 2
<body>
    <input type="text" id="txt" />
    <script>
        document.getElementById("txt").onkeydown = function () {
            keyFunction();
        }
        function keyFunction() {
            alert("onkeydown event worked successfully");
        }
    </script>
</body>

Example 3

onkeydown example 3
<body>
    <input type="text" id="txt" />
    <script>
        document.getElementById("txt").addEventListener("keydown",keyFunction)
        function keyFunction() {
            alert("onkeydown event worked successfully");
        }
    </script>
</body>

Example 4

onkeydown example 4
<body>
    <input type="text" id="txt" />
    <div id="res"></div>
    <script>
        let txt = document.getElementById("txt");
        let res = document.getElementById("res");
        txt.addEventListener("keydown",keyFunction)
        function keyFunction(letter) {
            res.innerHTML += letter.key;
        }
    </script>
</body>

Example 5

onkeydown example 5
<body>
    <input type="text" id="txt" />
    <script>

        let txt = document.getElementById("txt");
        txt.addEventListener("keydown", downFunction);
        txt.addEventListener("keyup", upFunction);

        function downFunction() {
            txt.style.backgroundColor = "#374852";
        }
        function upFunction() {
            txt.style.backgroundColor = "#17839f";
        }
    </script>
</body>

onkeypress Event

The JavaScript onkeypress feature occurs when the user presses a key on the keyboard. The onkeypress feature is very different from the onkeydown feature. The onkeypress feature does not work on all keys. (for example, ALT, CTRL, SHIFT, ESC)

Syntax:

HTML Attribute<element onkeypress = “handler(event)“>
Event Propertyobject.onkeypress = handler;
attachEvent Methodobject.attachEvent(“onkeypress“, handler)
addEventListener Methodobject.addEventListener(“keypress“, handler, useCapture)

onkeypress Examples

Example 1

onkeypress example 1
<body>
    <input type="text" onkeypress="keyFunction()" />
    <script>

        function keyFunction() {
            alert("onkeypress event worked successfully");
        }
    </script>
</body>

Example 2

onkeypress example 2
<body>
    <input type="text" id="txt" />
    <script>
        document.getElementById("txt").onkeypress = function () {
            keyFunction();
        }
        function keyFunction() {
            alert("onkeypress event worked successfully");
        }
    </script>
</body>

Example 3

onkeypress example 3
<body>
    <input type="text" id="txt" />
    <script>
        document.getElementById("txt").addEventListener("keypress",keyFunction)
        function keyFunction() {
            alert("onkeypress event worked successfully");
        }
    </script>
</body>

Example 4

onkeypress example 4
<body>
    <input type="text" id="txt" />
    <div id="res"></div>
    <script>
        let txt = document.getElementById("txt");
        let res = document.getElementById("res");
        txt.addEventListener("keypress",keyFunction)
        function keyFunction(letter) {
            res.innerHTML += letter.key;
        }
    </script>
</body>

Example 5

onkeypress example 5
<body>
    <input type="text" id="txt" />
    <script>

        let txt = document.getElementById("txt");
        txt.addEventListener("keydown", downFunction);
        txt.addEventListener("keyup", upFunction);

        function downFunction() {
            txt.style.backgroundColor = "#374852";
        }
        function upFunction() {
            txt.style.backgroundColor = "#17839f";
        }
    </script>
</body>

onkeyup Event

The Javascript onkeyup feature occurs when the user releases a key from the keyboard.

Syntax:

HTML Attribute<element onkeyup = “handler(event)“>
Event Propertyobject.onkeyup = handler;
attachEvent Methodobject.attachEvent(“onkeyup“, handler)
addEventListener Methodobject.addEventListener(“keyup“, handler, useCapture)

onkeyup Examples

Example 1

onkeyup example 1
<body>

<p>This example demonstrates how to assign an "onkeyup" event to an input element.</p>

<p>Press a key inside the text field and release it to set the text to uppercase.</p>

Enter your name: <input type="text" id="fname" onkeyup="myFunction()">

<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>

Example 2

onkeydown example 2
<body>

<p>This example uses the HTML DOM to assign an "onkeyup" event to an input element.</p>

<p>Press a key inside the text field and release it to set the text to uppercase.</p>

Enter your name: <input type="text" id="fname">

<script>
document.getElementById("fname").onkeyup = function() {myFunction()};

function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>

Example 3

onkeyup example 3
<body>

<p>This example uses the addEventListener() method to attach a "keyup" event to an input element.</p>

<p>Press a key inside the text field and release it to set a red background color.</p>

Enter your name: <input type="text" id="fname">

<script>
document.getElementById("fname").addEventListener("keyup", myFunction);

function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: