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


Posted in Javascript onDecember 20, 2011

其中大部分是靠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
Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
js简单时间比较的方法
Aug 02 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 #Javascript
js有关元素内容操作小结
Dec 20 #Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 #Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 #Javascript
js change,propertychange,input事件小议
Dec 20 #Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 #Javascript
Javascript面向对象设计一 工厂模式
Dec 20 #Javascript
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
Python正则表达式经典入门教程
2017/05/22 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python 编码规范整理
2018/05/05 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python实现超级马里奥
2020/03/18 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python tkinter实现连连看游戏
2020/11/16 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
AJAX的全称是什么
2012/11/06 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
会计自我鉴定
2014/02/04 职场文书
大班亲子运动会方案
2014/06/10 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
捐款仪式主持词
2015/07/04 职场文书
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python