Javascript没有从输入字段中读取单个字符答案

【问题标题】：Javascript not reading single character from input fieldJavascript没有从输入字段中读取单个字符
【发布时间】：2021-01-19 06:56:30
【问题描述】：

我在 Javascript 中遇到问题。在下面的代码中，有 2 个输入字段，id 分别为“v1”和“v2”。当我尝试仅使用单个字符记录输入字段 v1 的值时，控制台中没有显示任何内容。输入第二个字符后，控制台显示第一个字符。

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

输出：

【问题讨论】：

查看stackoverflow.com/questions/3396754/…
Keypress 捕获key-down之前的文本，切换到key-up。
keypress 事件在控件值更新之前触发。尝试使用change 事件。
这能回答你的问题吗？ onKeyPress Vs. onKeyUp and onKeyDown

标签： javascript html jquery css forms

【解决方案1】：

使用onkeyup 代替onkeypress。它不能与onkeypress 一起使用的原因是因为它在按下键时会生成控制台。到那时，该值还没有进入输入字段，这意味着它会给出已经存在的值。在输入字段中输入字符时，使用onkeyup 执行。

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" />

【讨论】：