非主流的textarea自增长实现js代码_javascript技巧-js教程-PHP中文网

非主流的textarea自增长实现js代码_javascript技巧

php中文网

发布： 2016-05-16 17:58:13

原创

1025人浏览过

其中大部分是靠scrollHeight(非W3C标准，由IE引入)，keyup事件来完成。有一种比较有意思的是通过“镜像元素(mirror element)”, 和setTimeout轮询实现。大致的实现思路如下:

把一个单独的pre元素，通过position:absolute的方式定位于client view之外，并且把它和textarea的样式设置的一样，我们把这个pre元素称为“mirror“，然后通过setTimeout进行200ms的轮询，把textarea中新的值更新到mirror元素中，由于mirror元素被设为block，所以它的大小会随内容的多少而变化，再通过取得mirror元素的offsetHeight来应用到对应的textarea，使之高度随内容变化。

这确实是个过不错的想法。但是这样的轮询似乎有点”浪费“，因为一般用户不会一直不停的进行输入，而且每次去计算offsetHeight，也是比较耗费资源的。

既然发现了问题，那么我们就针对问题进行改进，在他人的思路上进行修改，不会太困难。

先去掉计算mirror元素offsetHeight这一操作，我们可以用个wrapper包裹mirror元素和textarea,把它们的样式设置成相同，mirror元素通过visibility:hidden进行隐藏(注意不是display:none)，这样mirror元素空间依然占着，然后把textarea相对于wrapper绝对定位，把textarea覆盖于mirror元素之上，我们的例子中就是textarea覆盖于pre之上， textarea的height，width属性均设为100%，这样pre的高度变化可以直接反应到wrapper上, textarea的大小也会随之改变，这都是自动的，我们利用了”块级“元素的特点

针对无止境的轮询，我还是觉得用keyup来做好些，但是事件的处理上，我们可以给用户一个时间间隔，并不需要每次输入都要进行处理，例子中设置的时间间隔为250ms，当用户输入的过程中，如果用户停顿了下，有250ms间隙的话，就把textarea的value赋值给pre的span中。

思路讲完了，应该还是比较简单的。

下面是html和对应javascript(最近喜欢上mootools了)，由于css篇幅较长，具体可以看页面底部的jsfiddle share.

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

复制代码代码如下:

<span class="mirror"></span><br/>登录后复制

复制代码代码如下:

 
(function($, $$) { 
var mirrorEl = $$('.expanding-area .mirror'), 
textEl = $$('.expanding-area .source'), 
timehandle = null, 
handler = function() { 
mirrorEl.set('text', textEl.get('value')); 
}; 
handler(); 
textEl.addEvent('keyup', function(event) { 
clearTimeout(timehandle); 
timehandle = handler.delay(200); 
}); 
})($, $$); 