Javascript not reading single character from input field

Question

I am having a problem in Javascript. In the code below, there are 2 input field with id's "v1" and "v2" respectively. When I try to log the value of input field v1 with only a single character, nothing is shown in the console. After entering the 2nd character, the console shows the first character.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="v1" /><br>
    <input type="text" id="v2" />

    <script>

        document.getElementById("v1").onkeypress = function() {myFunction()};

        function myFunction() {
            console.log(document.getElementById("v1").value);
            document.getElementById("v1").style.backgroundColor = "red";
         }
    </script>
</body>
</html>

Output:

Output

Check this https://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown — Prashanth Reddy, Oct 04 '20 at 04:33
Keypress captures the text before the key-down, switch to key-up. — Mr. Polywhirl, Oct 04 '20 at 04:34
The keypress event fires before the control's value is updated. Try using the `change` event. — JLRishe, Oct 04 '20 at 04:47
Does this answer your question? [onKeyPress Vs. onKeyUp and onKeyDown](https://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown) — freedomn-m, Oct 04 '20 at 09:49

score 1 · Accepted Answer · answered Oct 04 '20 at 04:53

In place of onkeypress, use onkeyup. The reason why it is not working with onkeypress is because it generates console when the key pressed. Till then, the value has not entered the input field, meaning that it'll give value which is already there. Using onkeyup executes, when the character gets typed in the input field.

document.getElementById("v1").onkeyup = function() {
  myFunction()
};

function myFunction() {
  console.log(document.getElementById("v1").value);
  document.getElementById("v1").style.backgroundColor = "red";
}

<input type="text" id="v1" /><br>
<input type="text" id="v2" />

Javascript not reading single character from input field

1 Answers1