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>

  

最新文章

  1. OS命令注入中的空格
  2. [Centos]升级安装GCC
  3. Python开发【前端】:HTML
  4. bzoj4204: 取球游戏
  5. 【Java EE 学习 21 下】【使用java实现邮件发送、邮件验证】
  6. HDU 4821 String (HASH)
  7. java 线程的堵塞
  8. PowerDesigner数据库建模工具一缆
  9. 版本控制-git的使用
  10. md5实现
  11. 1、发布C++实现的TCP网络框架Khala
  12. JS的事件动态绑定机制
  13. ELK学习总结(1-1)ELK是什么
  14. POJOの説明
  15. RAID的基本介绍
  16. vue-01
  17. Django-Model操作数据库(增删改查、连表结构)
  18. 网络传输--TCP
  19. 【C语言】 8421BCD码与二进制的转换
  20. 【Delphi】@,^,#,$特殊符号意义

热门文章

  1. 客户端模拟线程线程池发送100个文件给socket
  2. windows下数字以2进制打印
  3. php 输出缓冲
  4. 20.Nodejs基础知识(上)——2019年12月16日
  5. man VGCREATE
  6. RMQ Topic
  7. 【leetcode】912. Sort an Array
  8. LeetCode--044--通配符匹配(java)*
  9. linux下将一系列.o文件打包成.a文件
  10. ECS主动运维事件--让你HOLD住全场 (二)