CODEWITHSUNDEEP
javascriptaddeventlistenerkeydownkeyuptypescript
Rahul Ahire
Rahul Ahire

Reputation: 825

what is difference between working of keyup and keydown in javascript?

I have been just learning the keypress events in javascript and wonder why do i get different result in keyup and keydown. for eg. if i assign an input with an id and pass through it a addEventListner[reffer code] then if i type "1234" in keydown event i get output as "123" and this issue doesnt happens with keyup event.

in short i just wanted to ask that why in case of keydown no of character(typed in input) is not equal to no. of character displayed in output. this doesnt happens with keyup and which one should i use?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="in" placeholder="enter a value" style="border: solid; margin: 15px; padding: 5px">
<div style="border: 5px solid black; margin:10px; width:30vw; height: 15vh">
       Keydown result: <div id="keydown"></div>
</div>
<div style="border: 5px solid black; margin:10px; width:30vw; height: 15vh">
        Keyup result:<div id="keyup"></div>
</div>
</body>
</html>

<script>
document.getElementById('in').addEventListener('keydown', runevent);

function runevent(e){
   
    document.getElementById('keydown').innerText = e.target.value;
    
}

document.getElementById('in').addEventListener('keyup', runevent1);

function runevent1(e){
   
    document.getElementById('keyup').innerText = e.target.value;
    
}


</script>

Upvotes: 6

Views: 5278

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074355

in short i just wanted to ask that why in case of keydown no of character(typed in input) is not equal to no. of character displayed in output. this doesnt happens with keyup and which one should i use?

If you're interested in characters, use keypress if you want to handle the character generated by the events, or use input if you just want the latest field value.

  • keydown is fired before the character is added to the field, which is why you don't see the 4 after typing 1234. (An if you prevent the default action of keydown, the character is never added.)

  • beforeinput is fired before a change occurs to the input (e.g., before a character is dded if the reason for the change is a keypress).

  • keypress is also fired before the character is added.
    Note: keypress is deprecated, see beforeinput and keydown.

  • input is fired after the character is added.

  • keyup is fired after the character is added.

This may help you see the sequence:

const input = document.getElementById("field");
const output = document.getElementById("output");

function handleEvent(e) {
    output.insertAdjacentHTML("beforeend",
       "<pre>" + e.type + ": " + input.value + "</pre>"
    );
}

input.addEventListener("keydown", handleEvent);
input.addEventListener("keyup", handleEvent);
input.addEventListener("keypress", handleEvent);
input.addEventListener("input", handleEvent);
#output pre {
    margin-top: 0;
    margin-bottom: 0;
}
<input type="text" id="field">
<div id="output"></div>

Upvotes: 6

A l w a y s S u n n y
A l w a y s S u n n y

Reputation: 38502

The KeyUp event is triggered when the user releases a Key.

The KeyDown event is triggered when the user presses a Key.

The keydown event occurs when the key is pressed, followed immediately by the keypress event. Then the keyup event is generated when the key is released.

In order to understand the difference between keydown and keypress, it is useful to understand the difference between a "character" and a "key". A "key" is a physical button on the computer's keyboard while a "character" is a symbol typed by pressing a button. In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers

Upvotes: 1

Related Questions