Question

我有一个textarea #text-g和一个div #textg。我想制作一个脚本，当textarea改变时（某人输入），div显示文本。

我已经制作了这个非常简单的代码，但当然它没有用，因为没有事件。

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

有人可以解释一下这些活动是如何运作的吗？我的两个代码是否足以与事件一起完成我想要实现的目标？

Answer 1

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

您可以阅读有关oninput事件的更多here。

默认情况下，还有一件DIV元素没有属性value，因此使用innerHTML使用div#textg textarea#text-g >

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

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

Answer 2

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

所以替换这一行

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

使用

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

Answer 3

使用JQuery：

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

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

纯JavaScript等价物：

----------------------------------- 
|                                 |
|          A          B           |
|                                 |
-----------------------------------

Answer 4

使用纯Javascript：

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

Answer 5

如下所示，

1.在textarea中输入onkeyup（）事件

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

使功能如下，

function myFunction（） {

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

}

3.Define，您要显示输出文本的位置，

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

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

这将捕获textarea的输入，并将其输出到div。

检查textarea是否发生变化，如果是，则在某处写入它的值

6 个答案: