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

Asked 5/7, 2019 at 16:0 Answered 5/7, 2019 at 16:6

Solved javascript addeventlistener keydown keyup typescript

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>

Cocaine answered 5/7, 2019 at 16:0 Comment(1)

The keydown is fired before the input element is updated (and can be cancelled). See onKeyPress Vs. onKeyUp and onKeyDown – Machinist 5/7, 2019 at 16:4

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>

Lexical answered 5/7, 2019 at 16:3 Comment(1)

@MingweiSamuel - Thanks for flagging that up, I should have mentioned it (now have). Deprecated, but never, ever, going away (regardless of the wording of MDN's standard deprecation notice). 😀 – Lexical 16/7, 2021 at 7:24

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

Expectancy answered 5/7, 2019 at 16:6 Comment(0)

Recommended topics

Hot tags