实现textarea自适应的方法

1、用div来模拟实现textarea自适应

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea高度自适应</title>
<style type="text/css">
#contentedit{
    padding: 3px;
    font-size: 12px;
    min-height: 30px;
    300px;
    max-height: 400px;
    border:1px solid blue;
    overflow-x:hidden;
    overflow-y:auto;
    word-wrap:break-word;
}
#contentedit:focus{
    border:red;
    outline: none;
    box-shadow: 0 0 2px red,0 0 1px blue;
}
</style>
</head>
<body>
<div id="contentedit" contenteditable="true">
　　<br>
</div>
</body>
</html>

2、使用js来处理textarea;自己写了插件模拟了下练手

一些参考资料：

自适应textareaAuto

http://www.zhangxinxu.com/wordpress/2010/12/div%E6%A8%A1%E6%8B%9Ftextarea%E6%96%87%E6%9C%AC%E5%9F%9F%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94/

http://www.dewen.org/q/2921/%E5%A6%82%E4%BD%95%E8%AE%A9textarea+%E9%AB%98%E5%BA%A6%E8%87%AA%E5%8A%A8%E6%8B%89%E4%BC%B8

输入操作资料：

http://calefy.org/2012/11/12/javascript-key-events-and-input-control.html

propertychange：

http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx

兼容处理解决方案：

http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html

use strict:

http://zhoujunmiao.com/?p=292

参考网上的代码最终效果：http://sandbox.runjs.cn/show/m63mvund

原文地址：https://www.cnblogs.com/w3cjiangtao/p/3358792.html