HTML - attributes - onk...

revision:

keyboard-related attributes

Supported HTML tags: all HTML elements, EXCEPT: <base>> <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

The order of events related to the key event: onkeydown, onkeypress, onkeyup.

"onkeydown" attribute : fires when the user is pressing a key (on the keyboard).

syntax: <element onkeydown="script"></element >

script: the script to be run on onkeydown.

"onkeypress" attribute : fires when the user presses a key (on the keyboard).

The onkeypress attribute is part of the event attributes and can be used on any HTML element.

syntax: <element onkeypress="script"></element>

script: the script to be run on onkeypress.

"onkeyup" attribute : fires when the user releases a key (on the keyboard).

syntax: <element onkeyup="script"></element>

script: the script to be run on onkeyup.

some examples

example

Press and hold down a key inside the text field to set a red background color. Release the key to set a green background color.

code: 
                    <p class="spec">Press and hold down a key inside the text field to set a 
                    red background color. 
                    Release the key to set a green background color.</p>
                    <input style="margin-left:3vw;" type="text" id="demo" 
                    onkeydown="keydownFunction()" 
                    onkeyup="keyupFunction()">
                    <script>
                        function keydownFunction() {
                        document.getElementById("demo").style.backgroundColor = "red";
                        }
                        function keyupFunction() {
                        document.getElementById("demo").style.backgroundColor = "green";
                        }
                    </script>

example>
code: 
                    <textarea style="margin-left:3vw;"  class="text_1" placeholder="Enter your message here" rows="5"
                    cols="40" onkeydown="keyFn()"></textarea>
                    <div class="show spec"></div>
                    <script>
                    function keyFn() {
                        document.querySelector(".show").innerHTML = 'You enter: ' +  document.querySelector(".text_1").value;
                    }
                    </script>

example

A function is triggered when the user is pressing a key in the input field.

code: 
                    <div>
                        <p class="spec">A function is triggered when the user is pressing a key in the input field.</p>
                        <input style="margin-left:3vw;" type="text" onkeypress="keyPress()">
                        <p id="demo_B" style="color:red"></p>
                    </div>
                    <script>
                        function keyPress() {
                        document.getElementById("demo_B").innerHTML = "You pressed a key inside the input field";
                        }
                    </script>

example

codes:

                    <textarea style="margin-left:3vw;" class=""  placeholder="Enter your message here" rows="5"
                    cols="40" onkeypress="keyFnc()"></textarea>
                    <div class="show_A spec"></div>
                    <script>
                        function keyFnc() {
                        document.querySelector(".show_A").innerHTML = 'You enter: ' + document.querySelector(".text_A").value;
                        }
                    </script>

example

Press and hold down a key inside the text field to set a red background color. Release the key to set a green background color.

code: 
                    <div>
                        <p class="spec">Press and hold down a key inside the text field to set a red background color. Release the key to set a green
                        background color.</p>
                        <input style="margin-left:3vw;" type="text" id="demo_C" onkeydown="keydownFunc()" onkeyup="keyupFunc()">
                    </div>
                    <script>
                        function keydownFunc() {
                        document.getElementById("demo_C").style.backgroundColor = "red";
                        }
                        function keyupFunc() {
                        document.getElementById("demo_C").style.backgroundColor = "green";
                        }
                    </script>