onKeyPress event will be triggered when we press key on the keyboard .

Inside an tag or element

onkeyPress="execute_function()";

<input  type=text id=t1 name=text onKeyPress=copy();>

Here is the syntax for onKeyPress event.

Object.onKeyPress="execute function or code"

getElementById

onKeyPress is part of three such key events

onKeyPress

onKeyDown

onKeyUp

Which one to use

Out of these three onKeyPress and onKeyDown will trigger first and onKeyUp will trigger last. In our demo you will see onKeyPress and onKeyDown will not able to copy the last character but onKeyUp will able to copy the most recent key. onKeyup event triggers last and before that the function copy the data.

In the above demo you can see one char less will be copied. By using onKeyUp we can solve this problem. Here is the complete code using onKeypress

<html>
<head>
<title>Demo of on onkeypress events in Javascript</title>
<script language=JavaScript>
<!--
function copy()
{
document.getElementById("t2").value=document.getElementById("t1").value;
}
//-->
</script>

</head>
<body>
<form name=my_form method=post>
What ever you type here 
<input  type=text id=t1 name=text onKeyPress=copy();> 
(Type minimum two chars)<br><br> will be copied to below textarea. <br>
<textarea id=t2   name=my_text rows=4 cols=30></textarea></form>
<br>
</body>
</html>

Subscribe to our YouTube Channel here

OnKeyPress

Which one to use

Subscribe