問題描述

要在textarea中輸入內(nèi)容，默認(rèn)為一行，當(dāng)輸入的內(nèi)容過多時(shí)自動(dòng)換行，并且高度增加？

問題解答

1, 用shadow

<p style='height:0; overflow:hidden;'> <p class='shadow'></p></p><textarea style='overflow:hidden;'></textarea><script> textarea.addEventListener(’input’, function(e) {shadow.innerHTML = this.value.replace(/</g, ’&lt;’).replace(/>/g, ’&gt;’);this.height = shadow.clientHeight + ’px’; });</script>

2, 用 contenteditable 屬性

<p contenteditable='true'>這里的高度會(huì)隨內(nèi)容自動(dòng)擴(kuò)展</p>

3, 如果用

textarea.style.height = textarea.scrollHeight + ’px’;

這種形式也可以調(diào)整高度, 但換行的時(shí)候會(huì)有滾動(dòng)條一閃而逝, 而且高度只會(huì)增加沒法減少, 是體驗(yàn)最差的寫法.

給textarea一個(gè)oninput事件

<textarea id='text'></textarea>document.getElementById(’text’).style.height = document.getElementById(’text’).scrollHeight + ’px’

類似這樣的

http://stackoverflow.com/ques...

textarea的總高度（用jQ的element.height(),如果是原生js，請查看手冊的BIF）/ 你定義的行高