通过事件监听器捕获的文本框值

这里是我的目标：我想要一个文本框，当我键入它时，它捕获我所拥有的只需键入，以便我可以在控制台中进行打印。通过事件监听器捕获的文本框值

我认为这应该很容易，但我有问题。如果我在文本框中键入内容，例如“我正在输入文本框”，则在控制台中将打印出“我正在输入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

通过事件监听器捕获的文本框值

回答

相关问题