非主流的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打印网页部分内容的脚本
Nov 17 Javascript
javascript 页面只自动刷新一次
Jul 10 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
javascript求日期差的方法
Mar 02 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
React中的Context应用场景分析
Jun 11 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
两款万能的php分页类
2015/11/12 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
wxPython中listbox用法实例详解
2015/06/01 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python判断正负数方式
2020/06/03 Python
通过自学python能找到工作吗
2020/06/21 Python
python全栈开发语法总结
2020/11/22 Python
python 实现IP子网计算
2021/02/18 Python
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
servlet面试题
2012/08/20 面试题
分公司经理岗位职责
2013/11/11 职场文书
教师现实表现材料
2014/02/14 职场文书
2014年档案管理工作总结
2014/11/17 职场文书