非主流的textarea自增长实现js代码
更新时间：2011年12月20日 01:52:02 作者：
今天稍微研究了下textarea随输入内容自动增长的功能，通过google参考了一些实现方式
其中大部分是靠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.
<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>
(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有段时间了，我们做前端的，得先前看呐: D
把一个单独的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.
复制代码 代码如下:
<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>
复制代码 代码如下:
(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有段时间了，我们做前端的，得先前看呐: D
相关文章
这篇文章主要介绍了javascript插件开发的一些感想和心得,需要的朋友可以参考下2016-02-02
JQuery 提供了两种方式来阻止事件冒泡，Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作，下文有个不错的示例，需要的朋友可以参考下2013-11-11
这篇文章主要介绍了JS文件/图片从电脑里面拖拽到浏览器上传文件/图片,需要的朋友可以参考下2017-03-03
扩展运算符 (spread syntax) 是 ES6 提供的一种非常便捷的新语法，给我们操作数组和对象带来了非常大的便利，我在很多文章中也提到了这个语法。但是其实扩展运算符的用法还是比较多比较杂的，我用一篇文章来做一下总结，梳理一下扩展运算的语法和使用细节。2020-11-11
基于Arcgis for javascript实现百度地图ABCD marker的效果
本篇文章由脚本之家小编给大家分享的基于Arcgis for javascript实现百度地图ABCD marker的效果，需要的朋友一起学习吧2015-09-09
这篇文章主要为大家详细介绍了js带闹铃功能的倒计时代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要为大家汇总了Bootstrap table分页的典型问题，以及对应每个bootstrap table分页问题的解决方法，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要给大家介绍了关于JS保留小数几种简单方法,在JS中保留小数的方法有很多,可以Math函数或者以字符串形式来进行处理,但在有的时候需要四舍五入,有时候不需要,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Javascript连接数据库查询并插入数据，下面文章围绕主题展开详细内容，具有一的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-03-03
这篇文章主要介绍了antd组件Upload实现自己上传的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论