www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons JavaScript onKeyDown, onKeyUp, onKeyPress Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
Lesson 28
Lesson 29
Lesson 30
Lesson 31
Lesson 32
Lesson 33
Lesson 34
Lesson 35
Lesson 36
Lesson 37
Lesson 38
Lesson 39
Lesson 40
Lesson 41
Lesson 42
Lesson 43
Lesson 44
Lesson 45
Lesson 46
Lesson 47
Lesson 48
Lesson 49

onKeyDown, onKeyUp and onKeyPress are JavaScript keyboard events usually used with input field of HTML forms.

onKeyDown event is raised when a key on the keyboard is pressed and before it is released. On the release of the key the onKeyUp and the onKeyPress events are raised.

Note that the onKeyPress event is not raised for all keys, more specifically for ALT, CTRL, SHIFT, ESC, etc., in all browsers. It is wise to use the onKeyDown event for all practical purposes.

The following example illustrates the usage of the JavaScript keyboard events:

<html>
<head>
<script type="text/JavaScript">

function keyDown() {
alert("Key pressed");
}

function keyUp() {
alert("Key released");
}

function keyPress(){
alert("Key pressed and released");
}

</script>

</head>

<body>
<input type="text" onKeyDown="keyDown()"><br>
<input type="text" onKeyUp="keyUp()"><br>
<input type="text" onKeyPress="keyPress()">
</body>

</html>


If you run the above code you may notice that in case of onKeyDown and onKeyUp events the value is updated in the text box first and then the code function is called. On the other hand in case of the onKeyPress event the function is called first and then the text box is updated.


Next >>> Lesson No. 29: JavaScript More Events







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.