javascript - js怎么获取textarea自动换行行数？

问题描述

要在textarea中输入内容，默认为一行，当输入的内容过多时自动换行，并且高度增加？

问题解答

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'>这里的高度会随内容自动扩展</p>

3, 如果用

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

这种形式也可以调整高度, 但换行的时候会有滚动条一闪而逝, 而且高度只会增加没法减少, 是体验最差的写法.

给textarea一个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）/ 你定义的行高