extarea高度(success)

textarea高度(success)

您好,今天源源来为大家解答以上的问题。textarea高度相信很多小伙伴还不知道,现在让我们一起来看看吧！

1、另外找一个元素，和textarea设置一样的样式，当textarea输入的时候，将内容填充到该元素内，然后再将该元素的高度赋值给textarea。

2、 这个元素比较苛刻了，不仅要接收textarea的文字内容，也要接收格式，比如回车什么的，很明显是pre标签了。

3、 写在pre标签里的东西可以原格式输出，如果要在别的元素，比如div上实现类似的效果，可能需要使用一些CSS，比如white-space:pre，诸如此类的代码。

4、 直接上代码了: 首先准备一个pre，一个textarea： 然后给他们设置相同的样式： .input { padding: 10px; width: 300px; min-height: 150px; border: 1px solid #ccc; resize: none; font-size: 20px; line-height:30px; overflow: hidden; word-wrap: break-word; } 这里设置了min-height，给他们一个最小高度，里面的字体行高的都设置的一样，这样他们的表现就一致了。

5、注意：为了纯英文的换行，加上word-wrap。

6、 最后一段简单的脚本： var textarea = document.getElementById('textarea'); var pre = document.getElementById('pre'); textarea.oninput = function() { pre.textContent = textarea.value; textarea.style.height = pre.offsetHeight + 'px'; } 监听textarea的input事件，更新自身的高度。

7、 这时候，高度自适应的textarea已经构造完成了。

8、但是pre这个元素我们是不想让他显示的，需要把他隐藏掉，但不能简单的display：none，这样就取不到pre的高度了，所以使用另外一个属性visibility，不过这个属性还是会占用空间的，把pre绝对定位即可： .hide { position: absolute; z-index: -100; visibility: hidden; } 大功告成！ 不过还有一些兼容性工作要做，IE8以下是不支持oninput事件的，但他们支持一个更强大的属性：onpropertychange。

9、 可能有的童鞋会觉得可以使用onkeyup或者onkeydown事件，我在chrome下试验了下，在textarea改变高度的时候，会有闪动，oninput的表现就比较平滑。

10、推荐使用oninput。

本文到这结束，希望上面文章对大家有所帮助。