JavaScript onkeyup and onkeydown usage differences

Last Update:2017-01-13 Source: Internet

Author: User

Tags html tags

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

OnKeyUp

The onkeyup event occurs when the keyboard key is loosened.

Grammar
onkeyup= "Somejavascriptcode" parameter description
Somejavascriptcode required. Specify the JavaScript to execute when the event occurs.

Supports HTML tags for this event:
<a>, <acronym>, <address>, <area>, <b> Lt;blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <del ", <dfn>, <div>, <dt>, <em>,
<fieldset>, <form>, <li>, <map> < Object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>,
<span ", <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea> ",
<th>, <thead>, <tr>, <tt>, <ul>, <var>
A JavaScript object that supports this event:
Docum ENT, image, link, textarea instance
when you type characters in an input field in an example, the characters are changed to uppercase (each):

The code is as follows

Copy Code

<body>

Enter your name: <input type= "text" id= "fname" onkeyup= "uppercase (this.id)"/>

</body>

OnKeyDown

Definitions and usage
The onkeydown event occurs when the user presses a keyboard key.

Syntax
onkeydown= "somejavascriptcode" parameter description
Somejavascriptcode required. Specify the JavaScript to execute when the event occurs.

Supports HTML tags for this event:
<a>, <acronym>, <address>, <area>, <b> Lt;blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <del ", <dfn>, <div>, <dt>, <em>,
<fieldset>, <form>, <li>, <map> < Object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>,
<span ", <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea> ",
<th>, <thead>, <tr>, <tt>, <ul>, <var>
A JavaScript object that supports this event:
Docum ENT, image, link, textarea hint and comment
Browser differences: Internet Explorer uses Event.keycode to retrieve pressed characters, while Netscape/firefox/opera uses EVENT.W Hich
Instance
In this example, the user cannot type a number in the input box:

code is as follows

copy code

<body>
<script type= "Text/javascript"
function Nonumbers (e)
{
var keynum
var Keychar
var numcheck

If (window.event)//IE
{
keynum = E.keycode
}
Else if (E.which)//Netscape/firefox/opera
{
keynum = E.which
}

Keychar = String.fromchar Code (keynum)
Numcheck =/d/
return!numcheck.test (Keychar)
}
</script>

From the area can be seen onkeydown is pressed when the trigger, this time the key value did not lose. The onkeyup is performed when the button is raised, and the key value is already there. And how long does it matter, like you add these 2 events to the input box,

Take a look at these two different running results to understand!

The code is as follows	Copy Code
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" > <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <title>insert title here</title> <body> <input type= "text" id= "test1" onkeydown= "alert (this.value);" /> <input type= "text" id= "test2" onkeyup= "alert (this.value);" /> </body>

Here is a section of the test code:

The code is as follows	Copy Code
<script type= "Text/javascript" > Document.onkeydown = function () { document.getElementById ("Test"). InnerHTML + = "keydown<br/>"; } Document.onkeyup = function () { document.getElementById ("Test"). InnerHTML + = "keyup<br/>"; } document.onkeypress = function () { document.getElementById ("Test"). InnerHTML + = "keypress<br/>"; } </script> <div id= "Test" ></div>

Test results are:

The code is as follows	Copy Code
KeyDown KeyPress KeyUp

Obviously, the sequence of events occurs: KeyDown--> keypress--> KeyUp
When you hold down a key for some time and then release it,

The results are:

code is as follows	copy code
keydown KeyPress KeyDown keypress KeyDown keypress KeyDown keypress ... KeyUp

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More