使用javascript html实时预览文本区域输入

Live preview of textarea input with javascript html

本文关键字：文本 区域 输入 javascript html 实时 使用      更新时间：2023-09-26

嗨，我正在设置一个文本区域输入的实时预览，该文本区域将发布到博客中。我目前已经设置了

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

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

谢谢你的帮助！

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

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

演示

代替onkeypress="..."

更改为onkeyup。这将解决您使用的问题，其中的字符未按预期更新。

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

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

查看此JSFiddle

试试这个

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

使用onkeyup而不是onkeypress

这是的演示

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

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

onkeyup事件将在您按下字母

时立即接收该字母
相关文章：