Question

我在想按下键时反复触发onkeypress属性。这通常是正确的，但是当我尝试使用此属性添加新段落时，它有时无法正常工作。你能否解释一下为什么第二个代码没有像第一个代码那样工作的原因？

这是第一个测试keypress属性的代码：

<!DOCTYPE html>
<html>
<head>
<title>Keypress</title>
</head>
<body>
<input type="text" maxlength="1" onkeypress="keypress_example()">
<div id="message">
</div>

<script>    
    function keypress_example(){
        var newPar = document.createElement('p');
        newPar.textContent= "Key is being pressed";
        document.getElementById("message").appendChild(newPar);
    }    
</script>
</body>
</html>

它的作用是有意的。当我添加onkeydown属性时，问题就开始了：

<!DOCTYPE html>
<html>
<head>
<title>Keypress</title>
</head>
<body>
<input type="text" maxlength="1" onkeypress="keypress_example()" onkeydown="keydown_example()">
<div id="message">
</div>

<script>    
    function keydown_example(){
        document.getElementById("message").innerHTML = "A key was pressed";
    }

    function keypress_example(){
        var newPar = document.createElement('p');
        newPar.textContent= "A key is being pressed";
        document.getElementById("message").appendChild(newPar);
    }    
</script>
</body>
</html>

如果对此代码执行相同操作，首先会触发keydown事件一次，之后按键事件会触发一次，但不会一次又一次地触发。这是什么原因？

Answer 1

首先，您需要关闭输入标记，以便HTML有效：

<input type="text" maxlength="1" onkeypress="keypress_example()" onkeydown="keydown_example()" />

接下来，你到底想要完成什么？你的代码有效。两个事件都会触发 - 两个事件都会更新＆＃34;消息＆＃34; DIV。但是，因为它们都会在每次按键时触发 - 并且它们都会更新＆＃34;消息＆＃34; div，它总是包含＆＃34;按下一个键＆＃34;然后是一个带有文字的段落＆＃39;正在按下一个键＆＃34; - 只要你击中的钥匙会发射两个事件。有些人不会 - 比如Backspace或Spacebar。

Answer 2

当用户按住键时，

keypress和keydown都会重复。阅读更多quirksmode

如果将新段落元素附加到其他元素，则会获得所需的行为。你的代码中发生的事情是keydown处理程序正在替换所有现有的段落元素，然后按键会添加一个。下面的代码按预期工作。

<!DOCTYPE html>
<html>
<head>
<title>Keypress</title>
</head>
<body>
<input type="text" maxlength="1" onkeypress="keypress_example()" onkeydown="keydown_example()">
<div id="message"> </div>
<div id="boxes"> </div>

<script>    
    function keydown_example(){
        document.getElementById("message").innerHTML = "A key was pressed";
    }

    function keypress_example(){
        var newPar = document.createElement("p");
        newPar.innerHTML= "A key is being pressed";
        document.getElementById("boxes").appendChild(newPar);
    }    
</script>
</body>
</html>

使用onkeypress属性添加新段落

2 个答案: