javascript - js怎麼取得textarea自動換行行數？

Question

要在textarea中輸入內容，預設為一行，當輸入的內容過多時自動換行，並且高度增加？

Answer 1

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, '<').replace(/\>/g, '>');
        this.height = shadow.clientHeight + 'px';
    });
</script>

2, 用 contenteditable 屬性

<p contenteditable="true">这里的高度会随内容自动扩展</p>

3, 如果用

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

這種形式也可以調整高度, 但換行的時候會有滾動條一閃而逝, 而且高度只會增加沒法減少, 是體驗最差的寫法.

Answer 2

給textarea一個oninput事件

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

類似這樣的

Answer 3

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

Answer 4

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