Javascript textarea中的onkeyup事件_Javascript_Dom Events_Textarea_Onkeyup

Javascript textarea中的onkeyup事件

javascript

Javascript textarea中的onkeyup事件,javascript,dom-events,textarea,onkeyup,Javascript,Dom Events,Textarea,Onkeyup,我有一个非常基本的HTML输入/输出结构： <textarea id="input" onkeyup="sendCode()"> Hello World! </textarea> <div id="output"></div> sendCode（）函数在我手动调用它时起作用，但在这个文本区域中似乎没有触发onkeyup事件以下是JSFIDLE：有什么帮助吗更新：JSFIDLE已

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

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

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

sendCode（）

函数在我手动调用它时起作用，但在这个文本区域中似乎没有触发

onkeyup

事件

以下是JSFIDLE：

有什么帮助吗

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

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

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

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

而工作

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

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

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

和工作

在哪里定义

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>


你好，世界！
var editor=document.getElementById（“编辑器”）；
var output=document.getElementById（“输出”）；
函数sendCode（）{
output.innerHTML=editor.value；
}
editor.addEventListener（'keyup'，sendCode）；

在哪里定义

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>


你好，世界！
var editor=document.getElementById（“编辑器”）；
var output=document.getElementById（“输出”）；
函数sendCode（）{
output.innerHTML=editor.value；
}
editor.addEventListener（'keyup'，sendCode）；

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

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

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

editor.onkeyup = "sendCode()"

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

editor.addEventListener(keyup,sendCode,false)

基本上，当一个键在该区域中出现时，它会调用

sendCode（）

函数。如果您不想使用捕获（我认为这是默认设置，但只是为了安全起见），则为假。

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

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

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

editor.onkeyup = "sendCode()"

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

editor.addEventListener(keyup,sendCode,false)

基本上，当一个键在该区域中出现时，它会调用

sendCode（）

函数。如果您不想使用捕获，则为假，我认为这是默认设置，但只是为了安全起见。

基本上java脚本不是动态的。因此更好的选择是使用jQuery

[注：-“jquery-2.2.min.js”在src中，在script标记中给出， is Jquery库文件代码可以从以下链接复制：

只需将上面链接的内容复制到一个文本文件中，并以“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>


动态文本区
$（文档）.ready（函数（）{
$（“textarea”）.keyup（函数（）{
sendCode（）；
});
});
函数sendCode（）{
document.getElementById（“输出”）.innerHTML=
document.getElementById（“输入”）.value；
}
你好，世界！

如果您有任何疑问，请询问。

我确信，一旦你学会使用jQuery，你就会忘记javascript。

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

[注：-“jquery-2.2.min.js”在src中，在script标记中给出， is Jquery库文件代码可以从以下链接复制：

这是你问题的答案

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


动态文本区
$（文档）.ready（函数（）{
$（“textarea”）.keyup（函数（）{
sendCode（）；
});
});
函数sendCode（）{
document.getElementById（“输出”）.innerHTML=
document.getElementById（“输入”）.value；
}
你好，世界！

如果您有任何疑问，请询问。

我相信，一旦你学会使用jQuery，你就会忘记javascript。

@DamanDaman如果这是你的最佳答案，你可以将其标记为已接受，让其他人知道np@DamanDaman如果这对你来说是最好的答案，你可以把它标记为接受，让别人知道