revision:
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.
script: the script to be run on onkeydown.
The onkeypress attribute is part of the event attributes and can be used on any HTML element.
script: the script to be run on onkeypress.
script: the script to be run on onkeyup.
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 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>
<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>
A function is triggered when the user is pressing a key in the input field.
<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>
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>
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.
<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>