Question

我在HTML中有一个非常基本的input/output结构：

<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事件未在此textarea中触发。

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

任何帮助？

更新：jsfiddle已更新并正在使用。

Answer 1

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

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

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

工作demo here

Answer 2

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

此代码段应该有效：

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

Answer 3

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

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

其次，尝试使用：

editor.onkeyup = "sendCode()"

在您的脚本区域或我创建的新功能的顶部：

editor.addEventListener(keyup,sendCode,false)

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

Answer 4

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

[注意： - 在src中给出的“jquery-2.2.2.min.js”，在脚本标记中，是Jquery Library文件代码可以从以下链接复制：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。

onkeyup事件在textarea中不起作用

4 个答案: