1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .textarea{ 8 300px; 9 border:1px solid #ccc; 10 min-height:200px; 11 max-height:300px; 12 overflow: auto; 13 outline:0; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="textarea" contenteditable="true">textarea</div> 19 </body> 20 </html>
现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框,而实际上textarea是没有虚框显示的,此迹象会暴露出div是个冒牌货,所以,需要添加下面的样式:outline:0;
另外div+contenteditable的方式虽然可以识别超链接,但是不能点击打开,针对这个问题创建一个iframe内联框架即可解决
本文参考自
http://www.zhangxinxu.com/wordpress/2010/12/div-textarea-height-auto/comment-page-1/#comment-360593
http://www.cnblogs.com/luozhihao/p/4745365.html