在Textarea键盘按下事件中将判断输入框里有多少\n然后动态增加rows
附近的朋友等待您的帮助
包打听移动版更好的工作机会
在100offer，提交一份个人资料，一周内即会有5-10家Top互联网公司主动向你发出邀请。100offer确保你的隐私万无一失，同时Consultant将为你全程提供专业服务。
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
web在线直播课
潭州教育是中国较早的在线教育平台,教学内容涵盖网络营销,java,javascript,jquery,android,ios,mysql,围棋,刺绣,养殖,农业,手艺,网页设计,平面设计,影视后期,CAD建筑机械,网络营销,商战智慧,办公软件,三维设计,工业设计,淘宝摄影,英语,音乐,大学代理,Photoshop教程,
Max教程,Maya教程,CAD教程,会声会影教程,AI教程,淘宝开店,摄影教程,免费教程,素材下载等众多在线学习精品课程。经过10年的发展,潭州教育已经发展为中国规模较大的在线教育平台。
React 中文文档 (v15.6.1)
React-用于构建用户界面的 JAVASCRIPT 库
CSS3参考手册
CSS3参考手册 - 最新最全的CSS参考手册，CSS3属性集合，CSS3 Properties, CSS3, CSS3手册, CSS3参考手册
您的位置： » 分类:
» 文章: 【jQuery插件】autoTextarea-文本框根据输入内容自适应高度
您可能感兴趣的文章
近期最热文章
- 3,821 - 2,763 - 2,616 - 2,567 - 1,819 - 253
关注WEB前端开发公众号在网络上发现一方法比较简单的实现文本框高度自适应，于是封装了这个函数，全兼容IE6+与现代！具体函数代码如下：
&&&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&&&&&&&&&&}&:&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.&&&&&&&&&if&(elem._length&===&elem.value.length)&return;&&&&&&&&&elem._length&=&elem.value.&&&&&&&&&&if&(!isFirefox&&&&!isOpera)&{&&&&&&&&&&&&&padding&=&parseInt(getStyle('paddingTop'))&+&parseInt(getStyle('paddingBottom'));&&&&&&&&&};&&&&&&&&&scrollTop&=&document.body.scrollTop&||&document.documentElement.scrollT&&&&&&&&&elem.style.height&=&minHeight&+&'px';&&&&&&&&&if&(elem.scrollHeight&&&minHeight)&{&&&&&&&&&&&&&if&(maxHeight&&&&elem.scrollHeight&&&maxHeight)&{&&&&&&&&&&&&&&&&&height&=&maxHeight&-&&&&&&&&&&&&&&&&&&style.overflowY&=&'auto';&&&&&&&&&&&&&}&else&{&&&&&&&&&&&&&&&&&height&=&elem.scrollHeight&-&&&&&&&&&&&&&&&&&&style.overflowY&=&'hidden';&&&&&&&&&&&&&};&&&&&&&&&&&&&&style.height&=&height&+&extra&+&'px';&&&&&&&&&&&&&scrollTop&+=&parseInt(style.height)&-&elem.currH&&&&&&&&&&&&&document.body.scrollTop&=&scrollT&&&&&&&&&&&&&document.documentElement.scrollTop&=&scrollT&&&&&&&&&&&&&elem.currHeight&=&parseInt(style.height);&&&&&&&&&};&&&&&};&&&&&addEvent('propertychange',&change);&&&&&addEvent('input',&change);&&&&&addEvent('focus',&change);&&&&&change();&};&
调用方法如下（textarea_id为textarea的id值）：
autoTextarea(document.getElementById('textarea_id'));&
另外一种简易的实现方法：
&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&TEXTAREA自适应文字行数的多少&&&&rows=&6&&name=&s1&&cols=&27&&onpropertychange=&this.style.posHeight=this.scrollHeight&&&&
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）博客分类：
&!DOCTYPE html&
&html xmlns="http://www.w3.org/1999/xhtml" &
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&文本框根据输入内容自适应高度&/title&
&style type="text/css"&
#textarea { font: 1.4em/1.8em A overflow: width: 550 height: 6 padding:10 }
&script src="autoTextarea.js"&&/script&
&body style="background:#FBFCFD url(http://goo.gl/kLsZX);"&
&textarea id="textarea"&&/textarea&
var text = document.getElementById("textarea"),
tip = '想写点什么..';
autoTextarea(text);// 调用
text.value =
text.onfocus = function () {
if (text.value === tip) text.value = '';
text.onblur = function () {
if (text.value === '') text.value =
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';
} : 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.
if (elem._length === elem.value.length)
elem._length = elem.value.
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
scrollTop = document.body.scrollTop || document.documentElement.scrollT
elem.style.height = minHeight + 'px';
if (elem.scrollHeight & minHeight) {
if (maxHeight && elem.scrollHeight & maxHeight) {
height = maxHeight -
style.overflowY = 'auto';
height = elem.scrollHeight -
style.overflowY = 'hidden';
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currH
document.body.scrollTop = scrollT
document.documentElement.scrollTop = scrollT
elem.currHeight = parseInt(style.height);
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
浏览: 97214 次
来自: 上海
你好，我运行了你的代码，当发送消息到已经登录的目标用户，则在目 ...
博主，貌似你的demo里面 取id的时候取的是password ...
果然过去啦楼主的不是http
是hhtp 呵 ...
laersheng 写道 木有MSSpline.swf，不过还 ...
木有MSSpline.swf，不过还是谢谢提供这么多的swf ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'12:01:29 UTC
PS: 还没有测试代码
开拍，给点建议，谢谢诸位
12:02:35 UTC
有没有React上传文件的组件?
14:22:25 UTC
可以捣鼓一个，这两天有事件捣鼓一下
14:23:37 UTC
textarea 的坑我们也躺过, 不过我们是查询光标位置... 我们不得已自己做了排版算法通过 scrollHeight 去算高度, 注意一下频繁输入情况下性能问题如何, 测试在接受范围内无所谓如果性能超出预期太多, 就要考虑一下奇葩方案进行优化了
14:24:39 UTC
上传可以看看我们的, 虽然代码有点古怪, 但是用 fileapi 类库实现了上传, 点击, 拖放, 粘贴, 都有浏览器兼容性到 IE10 左右, 但是还不稳定
09:50:30 UTC
文本框，设置一行高度时，无法自动适应高度，只有到三行时候才会响应内容高度}