你的位置:首页 > Java教程

[Java教程]构造高度自适应的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 id="pre"></pre>

 

大功告成!

 

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

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

 

完。