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


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中输入验证中一个不错的效果
Aug 21 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
JavaScript字符串对象
Jan 14 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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 8小时时间差的解决方法小结
2009/12/22 PHP
劣质的PHP代码简化
2010/02/08 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP中文编码小技巧
2014/12/25 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python使用多进程的实例详解
2018/09/19 Python
python对XML文件的操作实现代码
2020/03/27 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
祖国在我心中演讲稿600字
2014/05/04 职场文书
村创先争优活动总结
2014/08/28 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书