文本框根据输入内容自适应高度的代码


Posted in Javascript onOctober 24, 2011

其实现代浏览器大多都支持文本框尺寸调节功能,绝大多数情况下却没有自动适应来得爽快,在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,准备以后应用到项目中。
源代码:
23:03文章更新:
感谢alucelx同学再次给力的帮助,大大简化了方法,更新代码为0.2版本,同时解决了兼容Opera浏览器,至此全兼容IE6+与现代浏览器!
在线演示: http://demo.3water.com/js/2011/autoArea/index.htm
autoTextarea.js

/** 
* 文本框根据输入内容自适应高度 
* @author tang bin 
* @version 0.3 
* @see http://www.planeart.cn/?p=1489 
* @param {HTMLElement} 输入框元素 
* @param {Number} 设置光标与输入框保持的距离(默认20) 
* @param {Number} 设置最大高度(可选) 
*/ 
var autoTextarea = function (elem, extra, maxHeight) { 
extra = extra || 20; 
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window, 
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'), 
addEvent = function (type, callback) { 
elem.addEventListener ? 
elem.addEventListener(type, callback, false) : 
elem.attachEvent('on' + type, callback); 
}, 
getStyle = elem.currentStyle ? function (name) { 
var val = elem.currentStyle[name]; 
if (name === 'height' && val.search(/px/i) !== 1) { 
var rect = elem.getBoundingClientRect(); 
return rect.bottom - rect.top - 
parseFloat(getStyle('paddingTop')) - 
parseFloat(getStyle('paddingBottom')) + 'px'; 
}; 
return val; 
} : function (name) { 
return getComputedStyle(elem, null)[name]; 
}, 
minHeight = parseFloat(getStyle('height')); 
elem.style.maxHeight = elem.style.resize = 'none'; 
var change = function () { 
var scrollTop, height, 
padding = 0, 
style = elem.style; 
if (elem._length === elem.value.length) return; 
elem._length = elem.value.length; 
if (!isFirefox && !isOpera) { 
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom')); 
}; 
scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 
elem.style.height = minHeight + 'px'; 
if (elem.scrollHeight > minHeight) { 
if (maxHeight && elem.scrollHeight > maxHeight) { 
height = maxHeight - padding; 
style.overflowY = 'auto'; 
} else { 
height = elem.scrollHeight - padding; 
style.overflowY = 'hidden'; 
}; 
style.height = height + extra + 'px'; 
scrollTop += parseInt(style.height) - elem.currHeight; 
document.body.scrollTop = scrollTop; 
document.documentElement.scrollTop = scrollTop; 
elem.currHeight = parseInt(style.height); 
}; 
}; 
addEvent('propertychange', change); 
addEvent('input', change); 
addEvent('focus', change); 
change(); 
};

测试代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框根据输入内容自适应高度</title>
<style type="text/css">
#textarea { font: 1.4em/1.8em Arial; overflow: hidden; width: 550px; height: 6em; padding:10px; }
</style>
<script src="autoTextarea.js"></script>
</head>
<body style="background:#FBFCFD url(http://goo.gl/kLsZX);">
<textarea id="textarea"></textarea>
<script>
var text = document.getElementById("textarea"),
tip = '想写点什么..';
autoTextarea(text);// 调用
text.value = tip;
text.onfocus = function () {
if (text.value === tip) text.value = '';
};
text.onblur = function () {
if (text.value === '') text.value = tip;
};
</script>
</body>
</html>
Javascript 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
javascript打开word文档的方法
Apr 16 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 #Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 #Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 #Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 #Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 #Javascript
js两行代码按指定格式输出日期时间
Oct 21 #Javascript
jQuery中live方法的重复绑定说明
Oct 21 #Javascript
You might like
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
js图片预加载示例
2014/04/30 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python中urllib模块用法实例详解
2014/11/19 Python
Python CSV模块使用实例
2015/04/09 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Python hashlib模块实例使用详解
2019/12/24 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
转党组织关系介绍信
2014/01/08 职场文书
军训教官感言
2014/03/02 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2016年母亲节广告语
2016/01/28 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript