Question

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

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

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

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

感谢您的帮助！

Answer 1

使用keyup和keypress事件，如果有人按住某个键并重复显示，则单独使用keyup将无效。

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

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

DEMO

Answer 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

Answer 3

试试这个

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

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

使用onkeyup代替onkeypress

这是demo

Answer 4

您可以使用onkeyup or onchange

进行更改

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

Answer 5

javascript中的

onkeyup事件会在您按下后立即收到该信件

使用javascript html实时预览textarea输入

5 个答案: