通過事件監聽器捕獲的文本框值

這裏是我的目標：我想要一個文本框，當我鍵入它時，它捕獲我所擁有的只需鍵入，以便我可以在控制檯中進行打印。通過事件監聽器捕獲的文本框值

我認爲這應該很容易，但我有問題。如果我在文本框中鍵入內容，例如「我正在輸入文本框」，則在控制檯中將打印出「我正在輸入textbo」。它始終是一個字符。

這是爲什麼？我怎樣才能得到它打印我只是鍵入？

下面是代碼：

<body> 
<textarea rows="4" cols="50" id="message"></textarea><br> 
</body> 

<script> 
var messageEl = document.getElementById("message"); 
messageEl.addEventListener("keypress", functionGetMessage); 

function functionGetMessage() { 
    var message = document.getElementById("message").value; 
    console.log("message:" + message); 
}; 
</script>

另外，我不知道如果我的頭銜是適當的。

來源

2017-05-19 Jozurcrunch

*「爲什麼會這樣？」* - 因爲在您的'keypress'處理程序中，仍然可以取消事件的默認行爲，在這種情況下，當前按鍵不會更改該值。嘗試'keyup'而不是'keypress'。 – nnnnnn

這很酷。你的解釋是否涉及javacript的怪癖？或者是否存在這種行爲背後的複雜推理？ – Jozurcrunch

這不是一個怪癖，它是故意的。我已經提到了推理。許多事件處理程序（包括按鍵）允許您取消當前事件。如果你取消了一個按鍵，那麼在邏輯上按鍵不應該更新元素的值。因此，在按鍵事件處理程序中，該值顯示爲按鍵之前的值。您可以通過檢查傳遞給您的處理程序的'event'對象的屬性來確定剛剛按下哪個鍵。 – nnnnnn

使用input事件得到當前.value的<input>元素。

<body> 
 
<textarea rows="4" cols="50" id="message"></textarea><br> 
 
</body> 
 

 
<script> 
 
var messageEl = document.getElementById("message"); 
 
messageEl.addEventListener("input", functionGetMessage); 
 

 
function functionGetMessage() { 
 
    var message = document.getElementById("message").value; 
 
    console.log("message:" + message); 
 
}; 
 
</script>

來源

2017-05-19 03:36:23 guest271314

var messageEl = document.getElementById("message"); 
 
messageEl.addEventListener("keyup", functionGetMessage); 
 

 
function functionGetMessage() { 
 
    var message = document.getElementById("message").value; 
 
    console.log("message:" + message); 
 
};

<input id="message">

利用keyUp事件代替按鍵。或者您可以使用輸入

來源

2017-05-19 03:49:46

通過事件監聽器捕獲的文本框值

回答

相關問題