addeventlistener - 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>

<!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>

Share Improve this question edited Aug 4, 2023 at 12:26 asked Jul 5, 2019 at 16:00 Rahul Ahire 8252 gold badges16 silver badges31 bronze badges

3 The keydown is fired before the input element is updated (and can be cancelled). See onKeyPress Vs. onKeyUp and onKeyDown – p.s.w.g Commented Jul 5, 2019 at 16:04

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

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>

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 puter'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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

addeventlistener - what is difference between working of keyup and keydown in javascript? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)