本文介绍了一种利用Mirror Element（镜像元素）实现textarea自增长的非主流方案。通过绝对定位隐藏的pre元素同步内容，结合setTimeout轮询与keyup事件节流，动态调整textarea高度。该方法避免了scrollHeight的非标准依赖，提供了更稳定的跨浏览器解决方案，代码基于Mootools框架实现。
Mirror Element方案概述
目前主流的textarea自增长方案多依赖scrollHeight属性（该属性非W3C标准，由IE引入）配合keyup事件实现。此外，还有一种较为独特的思路是利用“镜像元素（mirror element）”结合setTimeout轮询机制来完成。其核心实现逻辑如下：
核心实现原理
具体做法是创建一个独立的pre元素，通过position:absolute将其定位在客户端视口（client view）之外，并赋予其与textarea相同的样式，此pre元素即被称为“mirror”。随后通过setTimeout进行200ms的轮询，将textarea中的新值同步更新至mirror元素。由于mirror元素被设置为block显示，其高度会随内容增减而自动变化。最后，获取mirror元素的offsetHeight并将其应用于对应的textarea，从而实现textarea高度随内容自适应变化的效果。
这一思路颇具创意，但持续的轮询机制存在资源浪费问题。通常情况下，用户不会持续不断地输入内容，且每次轮询计算offsetHeight都会消耗一定的系统资源。
性能优化与改进
针对上述问题，我们可以对现有思路进行优化改进，这并不复杂。
首先，移除对mirror元素offsetHeight的直接计算。我们可以使用一个wrapper容器同时包裹mirror元素和textarea，并将两者的样式设置为一致。将mirror元素通过visibility:hidden进行隐藏（注意不能使用display:none），这样mirror元素仍占据空间。接着，将textarea相对于wrapper进行绝对定位，使其覆盖在mirror元素之上。在示例中，即textarea覆盖于pre之上，并将textarea的height和width属性均设为100%。这样，pre元素的高度变化会直接反映到wrapper上，textarea的大小也会随之自动改变，这利用了块级元素的特性。
关于持续的轮询问题，使用keyup事件处理似乎更为合理。但在事件触发频率上，可以为用户设置一个时间间隔，无需每次输入都进行处理。示例中设置的时间间隔为250ms。当用户输入过程中出现停顿，且间隙达到250ms时，便将textarea的value赋值给pre中的span元素。
思路阐述完毕，整体实现相对简单。
代码实现与示例
以下是HTML结构和对应的JavaScript代码（近期偏好使用Mootools框架）。由于CSS代码篇幅较长，具体细节可参考页面底部的jsfiddle分享链接。
HTML代码如下：
<div class="expanding-wrap">
<div class="expanding-area">
<pre class="mirror-wrap"><span class="mirror"></span><br/></pre>
<textarea class="source" cols="30" rows="10"></textarea>
</div>
</div>JavaScript代码如下：
(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);
});
})($, $$); 最后，提供一篇不错的参考文献，感兴趣的读者可以查阅“参考”部分。本示例可能不支持IE6浏览器，鉴于放弃IE6已有一段时间，前端开发者应关注更先进的技术支持。