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


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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
javascript new后的constructor属性
Aug 05 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
javascript检测两个数组是否相似
May 19 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 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
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JS实现吸顶特效
2020/01/08 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
一篇.NET面试题
2014/09/29 面试题
教师求职自荐信
2014/03/09 职场文书
岗位职责怎么写
2014/03/14 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
元旦晚会活动总结
2014/07/09 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
环保守法证明
2015/06/24 职场文书
python pyhs2 的安装操作
2021/04/07 Python
简单了解 MySQL 中相关的锁
2021/05/25 MySQL