文本区域中的onkeyup事件

onkeyup event in textarea

本文关键字：onkeyup 事件 区域 文本      更新时间：2023-09-26

我在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已更新并正在工作。

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

var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
 output.innerHTML = input.value;
}

这里有一个工作演示

我首先想指出，这不会运行，因为代码在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。

[注：src中给出的-"jquery-2.2.2.min.js"，在script标记中，is 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。

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>
相关文章：