input value returns empty at first and repeating letter

Question

I have an input that I want to track it with each keydown event but at the first time I'm getting empty output and then one of letters repeating itself. try sssd for input , first you will get empty output and at last you will get ssss and I tried on other events too

let theinput = document.getElementById("clrinput");

theinput.addEventListener("keydown", () => {
  console.log(theinput.value);
});

<input type="text" id="clrinput">

the inputs value doesn't change on keydown - ahh, the bold statement that "this is not a similar question" has been removed - I found a repeat — Bravo, Aug 13 '21 at 14:56
You only get the letter repeating itself if you hold down the key, because of auto-repeat. — Barmar, Aug 13 '21 at 14:58

score 1 · Answer 1 · answered Aug 13 '21 at 14:58

As Barmar pointed out the keydown happens before the value is updated, if you change to keyup it works fine

let theinput = document.getElementById("clrinput");

theinput.addEventListener("keyup", () => {
  console.log(theinput.value);
});

<input type="text" id="clrinput">

score 1 · Accepted Answer · answered Aug 13 '21 at 15:02

1

use input event.. ?

let theinput = document.getElementById('clrinput');

theinput.addEventListener('input', () => {
  console.clear()
  console.log( theinput.value )
});

<input type="text" id="clrinput">

answered Aug 13 '21 at 15:02

Mister Jojo

20,093
6
21
40

Yup. This is working too. Actually keyup was working too but my liveserver had problem – IhateReact Aug 13 '21 at 15:10
@IhateReact `keyup` does not work on a mouse event, like a right click to execute a text past – Mister Jojo Aug 13 '21 at 16:22

input value returns empty at first and repeating letter

2 Answers2