检查文本区域是否发生变化，如果发生变化，将其值写在某处

Question

我有一个文本区域 #text-g 和一个 div #textg。我想为文本区域更改（有人在其中键入）时制作一个脚本，div 显示文本。

我编写了这个非常简单的代码，但是当然它不起作用，因为没有事件。

function myFunction() {
var text1 = document.getElementById('text-g').value; 
document.getElementById('textg').value = text1.val;
}

有人可以向我解释一下这些事件是如何运作的吗？我的两个代码是否足以通过事件来实现我想要实现的目标？

Answer 1

使用JQuery：

$("#text-g").change(function() {
    $("textg").text($("#text-g").val());
});

纯JavaScript相当于：

var textarea = document.getElementById("text-g");
var div = document.getElementById("textg");

textarea.onchange = function() {
    div.innerHTML = textarea.value;
}

Answer 2

使用纯 Javascript:

var el = document.getElementById("text-g");
el.oninput = function (e) {
  console.log(e.target.value);
}

Answer 3

您可以使用 oninput 事件来跟踪 text 输入。

您可以阅读更多 here 关于 oninput 活动的信息。

还有一件事 DIV 元素在默认情况下不会具有属性 value，因此使用 innerHTML 来使用来自 textarea#text-g 的文本填充 div#textg

function myFunction() {
document.getElementById('textg').innerHTML = document.getElementById('text-g').value;
}

<textarea id="text-g" oninput="myFunction();"></textarea>

<div id="textg"></div>

Answer 4

按照下面的步骤，

1.Put textarea 中的 onkeyup() 事件

<textarea id="abc" onkeyup="myFunction();"></textarea>

函数如下，

函数 myFunction() {

var txtValue = document.getElementById("abc").value;  
document.getElementById("output").innerHTML = txtValue;

}

3.Define，你想要显示输出文本的地方，

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

Answer 5

为了在 div 中设置文本，我们在纯 javascript 中使用 innerHTML。

所以替换这一行

document.getElementById('textg').value = text1.val;

有

document.getElementById('textg').innerHTML = text1.val;

Answer 6

此处为您提供的完整示例：https://jsfiddle.net/8w555grw/

var out = document.querySelector("#output");
var inp = document.querySelector("#input");
var updateOutput = function()
{
    out.innerHTML = inp.value;
};

inp.addEventListener("keyup", updateOutput);

这将捕获文本区域的输入，并将其输出到 div。

检查文本区域是否发生变化，如果发生变化，将其值写在某处

Check if a textarea changes, and if so, write it's value somewhere

javascript

textarea