javascript - 文本区域预览 Div

Question

我正在尝试编写一个自动显示在 div 中的 textarea 预览脚本(如 stackoverflow)。我创建了一个脚本，但它似乎不起作用。如果有人可以帮助我使用 HTML 和 JavaScript 编写脚本，我将不胜感激。

如图所示: http://i49.tinypic.com/282qpft.jpg

似乎不起作用的脚本: http://jsbin.com/ufeqoj

Answer 1

您的问题含糊不清，但也许有一些建议会有所帮助。

• 每次用户键入一个字符时，您都需要更新目标 div。这是 onkeyup 处理程序(或 onkeydown，具体取决于您预期的 UX - 可能是前者)。
• 是否要保留用户在文本区域中输入的任何 HTML？如果是这样，您需要更新目标 div 的 innerHTML 属性。如果您只想更新 text，请更改 innerText 属性。

一个使用 jQuery 的快速而肮脏的例子:

$("textarea#my_input").bind('keyup', function() {
    $("div#target").text($(this).val());
}

根据要求，在原生 JavaScript 中:

document.getElementById("my_input").onkeyup = function() {
    document.getElementById("target").innerText = this.value;
}