div模拟textarea文本域实现高度自适应

看完张鑫旭的关于“div模拟textarea文本域轻松实现高度自适应”这篇文章，我自己来总结一下：

一、textarea表单元素：

一般用于评论和留言框的实现，我们可以设置它的cols和rows值来限制它的看见区域和可见行数，不过更好的办法是使用 CSS 的 height 和 width 属性来设置textarea的高度和宽度。请看下面例子：

<textarea name="name" rows="2" cols="80" class="test-textarea" placeholder="请输入内容"></textarea>

.test-textarea {
      display: block;
      width: 400px;
      height: 60px;
      line-height: 30px;
      padding: 10px;
      margin: 0 auto;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 12px;
      word-wrap: break-word;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-user-modify: read-write-plaintext-only;
    }

没有输入内容时显示效果图：

输入内容之后：

大家会发现它只会显示2行的内容，其他部分的内容会通过滚动条来查看，这样想体验通过内容让高度自适应的时候，也是可以实现的，只是会很麻烦。

那我们想想有没有其他方便简单的方法呢，这就是接下来我们要说的通过div来模拟textarea

二：div来模拟textarea

请看下面的例子：

<div class="test-div" contenteditable="true"></div>

.test-div {
      width: 400px;
      min-height: 60px;
      line-height: 30px;
      max-height: 300px;
      _height: 60px;
      /* IE6浏览器对min/max家族不屑一顾，结合其内部元素溢出会撑开父标签高宽的特性,所以直接定高 */
      margin: 0 auto;
      padding: 10px;
      outline: 0;
      /* 浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框，而实际上textarea是没有虚框显示的 */
      border: 1px solid #a0b3d6;
      border-radius: 4px;
      font-size: 12px;
      word-wrap: break-word;
      overflow-x: hidden;
      overflow-y: auto;
      _overflow-y: visible;
      -webkit-user-modify: read-write-plaintext-only;
    }

未输入内容时：

输入内容之后：

三、一些需要注意的地方：

1、在使用div模拟textarea文本域的时候需要添加 outline:0;这个样式，避免在Firefox浏览器可编辑模式下div获取焦点的时候出现虚框。因为textarea实际上没有虚框显示。 

2、默认情况下我们可以在div里增加一个<br />换行标签，这样是为了避免Firefox浏览器在可编辑模式下，如果div内部元素是空的，在获取焦点时有可能光标不可见或光标与外部div齐高。但是，在IE8下，如果有默认的<br />标签，光标有可能会在第二行闪来闪去，所以这需要我们通过其他方式来解决在IE8下不让默认的<br />存在。

3、在不同浏览器下回车会产生一下别的标签元素，如下：

在Firefox浏览器下回车会自动产生一个<br />标签：

Chrome不会产生新标签：

Safari浏览器下回车会产生一个<br />标签

IE浏览器下（IE6~8）：输入回车会出现<p>标签，由于默认<p>标签会有上下margin值，为了效果统一，我们可以设置p{margin:0;

4、不同于textarea，可编辑模式下的div输入的内容会是很正宗的html代码，如果作为内容提交需要进行html字符过滤。

5、 IE6浏览器不支持max-height属性，所以，只用CSS是无法实现超过一定高度出现滚动条的效果，需要js配合实现。

6、 可编辑模式的div标签与textarea一样，是支持focus, blur事件的。自然也支持focus伪类，demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的:focus。