文本区域中文本的实时渲染

Question

我想在其附近创建一个文本区域和一个 div，类似于您在 Whosebug 的 "ask question" 页面中使用的内容。您在文本区域中键入文本，文本会在文本区域下实时呈现。我想让它把文本区域中输入的 "live" 一些代码（例如 "a024" ）转换为 div 中的符号。我需要使用 javascript 才能获得此功能吗？谢谢。

Answer 1

是的。在 JavaScript 的开头称为 DHTML for Dynamic HTML。您将不得不使用 Javascript 来创建此行为。

您可以通过以下方式获取元素的值：

var source = document.getElementById("sourceTextarea").value;

并在目标元素中设置文本，例如：

document.getElementById("destinationDiv").innerText = "some text";

在您的 HTML 中，您将不得不使用 :

<textarea id="sourceTextarea"></textarea><div id="destinationDiv"></div>

Answer 2

你肯定需要 Javascript 来实现这个目标。

你可以利用textarea的'onkeyup' 属性绑定一个javascript函数的keyup事件

完成此操作后，您可以处理 texarea 值以替换任何您需要的值。

function updateMyDiv() {
    var myTextarea = document.getElementById("myTextarea");
    var myDiv = document.getElementById("myDiv");
    myDiv.innerHTML = myTextarea.value;
}

<html>
<body>

<textarea id="myTextarea" onkeyup="updateMyDiv()">
</textarea>

<div id="myDiv">
</div>

</body>
</html>

文本区域中文本的实时渲染

Live render of text in a textarea

html

javascript

textarea