javascript onkeyup 事件在 textarea 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25976564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onkeyup event not working in textarea
提问by Damjan Pavlica
I have a very basic input/outputstructure in HTML:
我input/output在 HTML 中有一个非常基本的结构：
<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea>
<div id="output"></div>
And I have JS function that should pass everything from input to output:
我有 JS 函数，应该将所有内容从输入传递到输出：
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.innerHTML;
}
The sendCode()function works when I call it manually, but it seems that onkeyupevent not firing in this textarea.
该sendCode()函数在我手动调用时起作用，但似乎该onkeyup事件未在此文本区域中触发。
Here is jsfiddle: http://jsfiddle.net/mudroljub/y5a2n8ab/
这是 jsfiddle：http: //jsfiddle.net/mudroljub/y5a2n8ab/
Any help?
有什么帮助吗？
UPDATE: jsfiddle is updated and working now.
更新：jsfiddle 已更新并正在运行。
回答by andrex
回答by Tom
Where do you define the sendCode()function? It might not exist at the point where you create your text area.
你在哪里定义sendCode()函数？它可能在您创建文本区域时不存在。
This snippet should work:
这个片段应该工作：
<textarea id="editor">
Hello World!
</textarea>
<div id="output"></div>
<script type="text/javascript">
var editor = document.getElementById("editor");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = editor.value;
}
editor.addEventListener('keyup',sendCode);
</script>
回答by Brendan
I would first like to point out that this will not run because the code runs before the HTML exists, so first off, put these lines inside a function:
我首先要指出这不会运行，因为代码在 HTML 存在之前运行，所以首先，将这些行放在函数中：
window.onload= function anyname() {
var input = document.getElementById("input");
var output = document.getElementById("output");
}
Secondly, try using either:
其次，尝试使用：
editor.onkeyup = "sendCode()"
in your script area or at the top of the new function i created:
在您的脚本区域或我创建的新函数的顶部：
editor.addEventListener(keyup,sendCode,false)
Basically when a key goes up in that area it calls the sendCode()function. The false is if you don't want to use capture which I think is default anyway but just to be safe.
基本上，当一个键在该区域上升时，它会调用该sendCode()函数。错误是如果您不想使用我认为无论如何都是默认的捕获，但只是为了安全。
回答by Anupam
Basically java script is not that dynamic.So a better option is to use jQuery.
基本上java脚本不是那么动态。所以更好的选择是使用jQuery。
[Note:- "jquery-2.2.2.min.js" given in src, in script tag, is Jquery Library file codes can be copied from following link :http://code.jquery.com/jquery-2.2.2.min.js]
[注意：-在src中给出的“jquery-2.2.2.min.js”，在脚本标签中，是Jquery库文件代码可以从以下链接复制：http: //code.jquery.com/jquery-2.2.2 .min.js]
Just copy the contents from above link,into a textfile , save it by the name "jquery-2.2.2.min.js" or any other name as you wish.The src of script should contain the same. The "jquery-2.2.2.min.js" should be in the same directory where you have the html file. Otherwise full path to be mentioned.
只需将上面链接中的内容复制到文本文件中，以名称“jquery-2.2.2.min.js”或您希望的任何其他名称保存它。脚本的 src 应包含相同的内容。“jquery-2.2.2.min.js”应该在您拥有 html 文件的同一目录中。否则要提到完整路径。
Here is the answer to your question.
这是您问题的答案。
<html>
<head>
<title>Dynamic TextArea</title>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("textarea").keyup(function(){
sendCode();
});
});
function sendCode(){
document.getElementById("output").innerHTML =
document.getElementById("input").value;
}
</script>
</head>
<body>
<form>
<textarea id="input">
Hello World!
</textarea>
</form>
<span id="output"></span>
</body>
</html>
If you have any doubts please ask. I am sure once you learn to use jQuery you would forget javascript.
如果您有任何疑问，请询问。我相信一旦你学会了使用 jQuery，你就会忘记 javascript。
