textarea 中的 onkeyup 事件答案

【问题标题】：onkeyup event in textareatextarea 中的 onkeyup 事件
【发布时间】：2014-09-22 14:28:58
【问题描述】：

我有一个非常基本的 HTML 输入/输出结构：

<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea> 

<div id="output"></div>

我有 JS 函数，应该将所有内容从输入传递到输出：

var input = document.getElementById("input");
var output = document.getElementById("output");

function sendCode(){
 output.innerHTML = input.innerHTML;
}

sendCode() 函数在我手动调用时有效，但似乎onkeyup 事件未在此文本区域中触发。

这里是 jsfiddle：http://jsfiddle.net/mudroljub/y5a2n8ab/

有什么帮助吗？

更新：jsfiddle 已更新并正在运行。

【问题讨论】：

标签： javascript dom-events textarea onkeyup

【解决方案1】：

使用值，因为它不是内容文本而是值属性

var input = document.getElementById("input");
var output = document.getElementById("output");

function sendCode(){
 output.innerHTML = input.value;
}

还有一个工作的demo here

【讨论】：

@DamanDaman 如果它是您的最佳答案，您可以将其标记为已接受，让其他人知道 np

【解决方案2】：

基本上java脚本不是那么动态的。所以更好的选择是使用 jQuery。

[注：-“jquery-2.2.2.min.js”在 src 中给出，在脚本标签中，是 Jquery 库文件代码可以从以下链接复制：http://code.jquery.com/jquery-2.2.2.min.js]

只需将上面链接中的内容复制到一个文本文件中，以“jquery-2.2.2.min.js”的名称保存或您希望的任何其他名称。脚本的 src 应包含相同的名称。 “jquery-2.2.2.min.js”应该在同一个目录中你有 html 文件。否则要提及完整路径。

这是您问题的答案。

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

如果您有任何疑问，请询问。我敢肯定，一旦你学会使用 jQuery，你就会忘记 javascript。

【讨论】：

【解决方案3】：

您在哪里定义sendCode() 函数？它可能不存在于您创建文本区域的位置。

这个 sn-p 应该可以工作：

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

【讨论】：

【解决方案4】：

我首先要指出的是，这不会运行，因为代码在 HTML 存在之前运行，所以首先，将这些行放在一个函数中：

window.onload= function anyname() {
var input = document.getElementById("input");
var output = document.getElementById("output");
}

其次，尝试使用：

editor.onkeyup = "sendCode()"

在您的脚本区域或我创建的新函数的顶部：

editor.addEventListener(keyup,sendCode,false)

基本上，当某个键在该区域上升时，它会调用sendCode() 函数。错误的是，如果您不想使用我认为默认的捕获，但只是为了安全。

【讨论】：