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


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 相关文章推荐
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
AngularJS实现进度条功能示例
2017/07/05 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python中Random和Math模块学习笔记
2015/05/18 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python生成器用法实例详解
2019/11/22 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
校长寄语大全
2014/04/09 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
开学随笔
2015/08/15 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js