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


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 相关文章推荐
javascript 读取图片文件的大小
Jun 25 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
微信小程序实现左滑删除效果
Nov 18 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的SQL注入过程分析
2012/01/06 PHP
php实现文件预览功能
2017/05/23 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
TensorFlow实现创建分类器
2018/02/06 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python PyQt5整理介绍
2020/04/01 Python
python3.5的包存放的具体路径
2020/08/16 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
详解python中的异常捕获
2020/12/15 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
文员个人求职自荐信
2013/09/21 职场文书
六十大寿答谢词
2014/01/12 职场文书
心理健康课教学反思
2014/02/13 职场文书
公司会议开幕词
2016/03/03 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers