Question

我正在写一个简单的javascript表单，它根据值“blue”检查输入值。现在，如果你输入“蓝色”，它表示它是不正确的，但如果添加任何其他字符，它说是正确的。好像有一个字符的延迟，所以当我输入“蓝色”时，它只会变成“蓝色”。这是代码：

<html>
<head>
<title>Favorite Color</title>
</head>

<body>
<h1>Quiz Time</h1>
<h2>What is your favorite color?</h2>

<p>Your Answer: <input type="text" id="txtinput" /></p>
<p id="message"></p>

<script type = "text/javascript">
function init() {
    var inp = document.getElementById("txtinput");
    inp.onkeypress=checkAnswer;

    checkAnswer();
}

onload = init;

function checkAnswer() {
    var text = document.getElementById("txtinput");
    var msg = document.getElementById("message");

    var sol = "blue";
    var ans = text.value;
    ans = ans.toLowerCase();

    if (ans.length <=0) {
        msg.innerHTML="<span style=\"color:blue;\">Enter Something.</span>";
    }
    else if (ans == sol) {
        msg.innerHTML="<span style=\"color:green;\">Correct!</span>";
    } else {
        msg.innerHTML="<span style=\"color:red;\">Wrong!</span>";
    }
}

</script>
</body>
</html>

Answer 1

将事件更改为 onkeyup 而非 onkeypress

inp.onkeyup=checkAnswer;

Answer 2

使用HTML5 input事件并回退IE中的propertychange事件＆lt;我在SO上多次写过这篇文章;这里有两个例子：

Javascript onkeypress事件触发但输入文本值不正确

2 个答案: