构造高度自适应的textarea

高度自适应的textarea，这个需求仍是比较常见的，随着用户的输入textarea的高度自动变化，这样输入较少的时候能够节省空间，输入多的时候能够不出现滚动条，让内容尽量的展示在用户的视线内。

惋惜的是textarea自己没有自适用的技能，文字过多就会出现滚动条的，因此咱们须要曲线救国。

 

基本思路：另外找一个元素，和textarea设置同样的样式，当textarea输入的时候，将内容填充到该元素内，而后再将该元素的高度赋值给textarea。

 

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

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

 

直接上代码了:

首先准备一个pre，一个textarea：

<pre class="input" id="pre"></pre>
<textarea class="input" id="textarea"></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，给他们一个最小高度，里面的字体行高的都设置的同样，这样他们的表现就一致了。注意：为了纯英文的换行，加上word-wrap。

最后一段简单的脚本：

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事件，更新自身的高度。

 

这时候，高度自适应的textarea已经构造完成了。可是pre这个元素咱们是不想让他显示的，须要把他隐藏掉，但不能简单的display：none，这样就取不到pre的高度了，因此使用另一个属性visibility，不过这个属性仍是会占用空间的，把pre绝对定位便可：

.hide {
    position: absolute;
    z-index: -100;
    visibility: hidden;
}

<pre class="input hide" id="pre"></pre>

 

大功告成！

 

不过还有一些兼容性工做要作，IE8如下是不支持oninput事件的，但他们支持一个更强大的属性：onpropertychange。

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

 

完。