关于javascript：onkeyup事件在textarea中不起作用


onkeyup event not working in textarea

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

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

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

1
2
3
4
5
6
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已更新，现在可以工作。

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

1
2
3
4
5
6
var input = document.getElementById("input");
var output = document.getElementById("output");

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

还有一个工作演示

相关讨论

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

[注意：-src中在脚本标记中给出的" jquery-2.2.2.min.js"，
可以从以下链接复制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文件。否则，将提及完整路径。

这是您问题的答案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <html>
     <head>
       Dynamic TextArea
       <script type="text/javascript" src="jquery-2.2.2.min.js">
       <script type="text/javascript">
             $(document).ready(function(){
                     $("textarea").keyup(function(){
                           sendCode();
                     });
             });

             function sendCode(){
                  document.getElementById("output").innerHTML =
                  document.getElementById("input").value;
             }
       
     </head>
     <body>
        <form>
              <textarea id="input">
                      Hello World!
              </textarea>
        </form>
        <span id="output"></span>
     </body>
    </html>

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

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

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

其次，尝试使用以下任一方法：

1
editor.onkeyup ="sendCode()"

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

1
editor.addEventListener(keyup,sendCode,false)

基本上，当某个键在该区域中向上移动时，它将调用sendCode()函数。错误的是，如果您不想使用捕获，我认为这是默认设置，但只是为了安全起见。

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

该代码段应该可以工作：

1
2
3
4
5
6
7
8
9
10
11
12
<textarea id="editor">
    Hello World!
</textarea>

<script type="text/javascript">
    var editor = document.getElementById("editor");
    var output = document.getElementById("output");

    function sendCode(){
     output.innerHTML = editor.value;
    }
    editor.addEventListener('keyup',sendCode);