使用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屬性添加新段落

回答

相關問題