css部分

#textarea {
display: block;
margin:0 auto;
overflow: hidden;
width: 550px;
font-size: 14px;
height: 18px;
line-height: 24px;
padding:2px;
}
textarea {
outline: 0 none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}

js代码

/**
* 文本框根据输入内容自适应高度
* @param {HTMLElement} 输入框元素
* @param {Number} 设置光标与输入框保持的距离(默认0)
* @param {Number} 设置最大高度(可选)
*/
var autoTextarea = function (elem, extra, maxHeight) {
extra = extra || 0;
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.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();
};

  html部分  包含调用

<textarea id="textarea" placeholder="回复内容"></textarea>
<script>
var text = document.getElementById("textarea");
autoTextarea(text);// 调用
</script>

  

textarea实现高度自适应的更多相关文章

  1. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

  2. textarea下高度自适应

    1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea  使用h5的属性    <div contenteditable=&quo ...

  3. div模拟textarea且高度自适应

    需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...

  4. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  5. 构造高度自适应的textarea

    高度自适应的textarea,这个需求还是比较常见的,随着用户的输入textarea的高度自动变化,这样输入较少的时候可以节省空间,输入多的时候可以不出现滚动条,让内容尽可能的展现在用户的视线内. 可 ...

  6. textarea高度自适应问题

    textarea中的文字如果过多,就会产生滚动条,一本分文本被遮盖住,不能看到所有的文本. 那么,如何才能让textarea的高度随输入内容多少,可以自动的改变高度呢? 解决思想: 1 利用conte ...

  7. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  8. 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  9. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [web 安全] php随机数安全问题

    and() 和 mt_rand() 产生随机数srand() 和 mt_srand() 播种随机数种子(seed)使用: <?php srand(123);//播种随机数种子 for($i=0; ...

  2. tuple写法

    name = ("wen") 类型为strname = ("wen",) 类型为tuple

  3. windows2008R2-AD域控组策略设置与其它相关设置

    防火墙设置 修改>计算机配置>策略>安全设置>高级安全windows防火墙>高级安全windows防火墙 修改入站规则 1.组名-文件和打印机共享(SMB-In)> ...

  4. Task1.数据集探索

    中文数据集THUCNews:https://pan.baidu.com/s/1hugrfRu 密码:qfud 参考:https://blog.csdn.net/SMith7412/article/de ...

  5. OC + RAC(七) RACSubject和RACSignal的区别

    -(void)_test8{ /// RACSubject继承自RACSignal 但是RACSubject和RACSignal的区别? //1能接收1,2 //但是2只能接收2 RACSubject ...

  6. OC + RAC (二) Command 命令的用法

    -(void)_test2{ ///////////////////////////////////////Command 命令的用法 注意使用command.executionSignals去订阅时 ...

  7. 四-1、Cadence Allegro推荐操作方式和视图命令

    第四章:实用命令详解 1.Cadence Allegro推荐操作方式: 激活命令 选择操作对象的属性 设置相关的命令参数 单击对应的对象 结束命令 2.视图命令:

  8. HDU 5179 beautiful number (数位dp / 暴力打表 / dfs)

    beautiful number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. Getting Started Tutorial from msdn

    Getting Started Tutorial The topics contained in this section are intended to give you quick exposur ...

  10. 小程序的开发框架MINA及小程序的启动机制

    MINA框架分三个部分 视图层(View):有很多页面,每个页面有wxml和wxss组成的,视图结构和展现样式 逻辑层(App Service):处理事物逻辑的地方以及数据交互的服务中心 系统层(Na ...