使用onkeypress属性添加新段落

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

这是第一个代码来测试按键属性：

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

它作为intented。

<!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事件触发一次，之后的按键事件触发一次，但它不是一次又一次触发：当我还添加了一个onkeydown事件属性的问题开始。这是什么原因？

来源

2014-10-31 Zalajbeg

难道是因为你没有搜索onkeyup事件，所以一旦按下了初始键，就是脚本而不是搜索另一个，因为逻辑上它仍然被按下？ – 2014-10-31 12:16:09

keypress和都在用户按下键时重复。阅读更多信息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>

来源

2014-10-31 12:29:49 user3357118

我不知道onkeydown属性是重复触发。谢谢澄清。 – Zalajbeg 2014-10-31 12:47:21

首先，你需要关闭输入的标签让你的HTML是有效的：

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

接下来，究竟是你想完成什么？你的代码有效。两个事件都会触发 - 并且两个事件都会更新“消息”div。但是，由于它们都是每次按键触发的，而且它们都会更新“message”div，所以它总是会包含“A key was pressed”，随后是带有文本“正在按下某个键”的段落 - 只要键你会触发两个事件，有些不会 - 像Backspace或Spacebar

来源

2014-10-31 12:31:52

首先感谢您的答案，但我想补充一点，据我所知输入标签doesn在HTML5中不必关闭，看起来我错过的是我没有意识到当按键被按下时，这两个属性都会重复触发。 – Zalajbeg 2014-10-31 12:46:13

了解输入标签。但是，你的问题不是你的函数的重复触发，而是你的问题是你覆盖了同一个div的内容。 – 2014-10-31 12:49:27

我同意，但我一直认为onkeydown属性不会一次又一次地被触发，因此我假设当我按住onkeydown属性的按键时，第一次不会被触发，并且不会覆盖相同的div内容。顺便说一句，你的回答也有帮助，但我只能选择一个答案作为接受。因此，我唯一能做的就是提高你的答案。谢谢你的帮助。 – Zalajbeg 2014-10-31 13:06:46

使用onkeypress属性添加新段落

回答

相关问题