使用 javascript html 实时预览 textarea 输入答案

【问题标题】：Live preview of textarea input with javascript html使用 javascript html 实时预览 textarea 输入
【发布时间】：2012-09-04 20:16:35
【问题描述】：

您好，我正在设置将发布到博客的文本区域输入的实时预览。我目前有这个设置

<textarea name="WPcomment" id="WPComment" placeholder="Add comments:" onkeypress="document.getElementById('prevCom').innerHTML = this.value"></textarea>

<div id="prevCom"></div>

问题是预览是文本区域输入后面的一个字符。例如，如果我写“我的评论”，我会看到“我的评论”

感谢您的帮助！

【问题讨论】：

标签： javascript html textarea auto-update

【解决方案1】：

使用 keyup 和 keypress 事件，如果有人按住某个键并重复，单独使用 keyup 将不起作用。

var wpcomment = document.getElementById('WPComment');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    document.getElementById('prevCom').innerHTML = this.value;
}

DEMO

【讨论】：

@Musa 谁能使用 div 而不是 textarea 来完成这项工作？我有一个不想使用 textarea 更改的代码。我希望它加载到实时预览框中。然后，作为第二步，我将有这样的东西，用户将能够更改特定部分：apolosiskos.co.uk/HTML-CSS-EDITOR/index3.html

【解决方案2】：

而不是onkeypress="..."

更改为onkeyup。这将解决您遇到的字符未按预期更新的问题。

所以你的最终代码应该是：

<textarea name="WPcomment" id="WPComment" placeholder="Add comments:" onkeyup="document.getElementById('prevCom').innerHTML = this.value"></textarea>
<div id="prevCom"></div>

Check out this JSFiddle

【讨论】：

【解决方案3】：

试试这个

<textarea name="WPcomment" id="WPComment" placeholder="Add comments:" onkeyup="document.getElementById('prevCom').innerHTML = this.value"></textarea>

<div id="prevCom"></div>

使用onkeyup 而不是onkeypress

这里是demo

【讨论】：

【解决方案4】：

您可以使用onkeyup or onchange进行更改

onkeyup ="document.getElementById('prevCom').innerHTML = this.value"

【讨论】：

【解决方案5】：

onkeyup javascript 中的事件将在您按下它时立即接收该字母

【讨论】：