时间戳

首页 > 解决方案 > Javascript没有从输入字段中读取单个字符

javascript - Javascript没有从输入字段中读取单个字符

问题描述

我在 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>

输出：

输出

标签： javascripthtmljquerycssforms

解决方案

代替onkeypress，使用onkeyup。它无法使用的原因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" />

推荐阅读