使用javascript html實現textarea輸入的預覽

嗨，我正在設置一個將發佈到博客的textarea輸入的實時預覽。我目前有這個設置使用javascript html實現textarea輸入的預覽

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

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

問題是，預覽是textarea輸入後面的一個字符。例如，如果我寫「我的評論」，我看到「我的意見」

感謝您的幫助！

來源

2012-09-04 codelove

使用'onkeyup'事件 – Eru

使用KEYUP和按鍵事件改變，KEYUP本身不會，如果有人認爲工作按下一個鍵，它會重複。

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

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

DEMO

來源

2012-09-04 20:23:08 Musa

感謝小費 – codelove

@Musa人怎樣才能使採用div在此工作代替textarea？我有一個我不想用textarea改變的代碼。我希望它在實時預覽框中加載。然後，作爲第二步，我會有這樣的東西，用戶可以在其中更改特定部分：http://apolosiskos.co.uk/HTML-CSS-EDITOR/index3.html –

試試這個

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

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

使用onkeyup，而不是onkeypress

這裏是demo

來源

2012-09-04 20:20:48 Kishore

代替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

來源

2012-09-04 20:21:40 Anil

您可以onkeyup or onchange

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

來源

2012-09-04 20:22:26

onkeyup事件在JavaScript將盡快把信你按下它

來源

2012-09-04 20:24:22

使用javascript html實現textarea輸入的預覽

回答

相關問題