1、关于textarea文本域以及高度自适应
<textarea>标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。
作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条，高度固执地岿然不动。所以，有时候，为了增加交互体验想让文本域高度自适应的时候，就会遇到麻烦。并不是不能实现，例如Google的Buzz的输入框就是高度自适应里面的内容的。
文本域的高度自适应可以通过JavaScript脚本实现的。要克隆一个隐藏的textarea，通过实时的文字赋值，检测是否产生滚动条来确定显示文本域的高度是否动态增加。对于JavaScript不熟悉的人来讲，这种方法的实现比想办法跟校花约会还麻烦。
然而，实际上，如果你要求不是很高，是个非常简便，且老少皆宜的实现方法的。这种方法就是使用普通的<div>标签模拟<textarea>文本域，同时又利用了<div>标签的高度自适应性。于是，textarea文本域的高度自适应效果就可以轻松实现。
2、div模拟textarea文本域及高度自适应
contenteditable，顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。
应用了此属性后，普通的div标签也会像文本域一样可以获得焦点，同时有一个光标在那里闪。
使用很简单，一个普通的block元素上加个contenteditable="true"就ok了，如下：
<div contenteditable="true"></div>
true外面的引号甚至去掉都没关系。
contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。
ok，最麻烦的模拟textarea的可编辑效果已经解决了，现在想要使用<div>实现高度自适应那就像是给花花草草松松土一样容易的。
于是，假设我们要实现默认200像素高度，高度可随内容自适应的效果，直接下面两个样式就可以了：
{ min-height: 200px; _height: 200px; }
于是，把说到现在的内容结合一起，就可以使用div模拟textarea文本域轻松实现高度自适应了。
如下测试代码——
CSS代码：
.test_box {
width: 400px;
min-height: 120px;
max-height: 300px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
_overflow-y: visible;
}
HTML代码：
<div class="test_box" contenteditable="true"><br /></div>
3、一些注意与说明
1、 现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框，而实际上textarea是没有虚框显示的，此迹象会暴露出<div>是个冒牌货，所以，需要添加下面的样式：
outline:0;
2、 Firefox浏览器下可编辑模式的div如果内部元素是空空的，那么其在获取焦点是时候，光标不可见或是与外部div齐高，这也是会暴露出自己是textarea冒牌货的，所以，默认情况下，我们可以在此div中增加一个孤单的<br>换行标签。但是，IE8下，如果有个默认的<br>标签，光标位置可能会在第二行闪来闪去，所以，IE8下可编辑div里面默认是不能有<br>标签的，这个嘛，您自己想办法清掉吧。
3、 IE浏览器下（IE6~8），输入文字回车的时候，<div>内部是会自动产生<p>标签包含每行元素的，而其他浏览器貌似是产生<br>标签（这里尚未全部测试，如有不准，欢迎指正）。由于默认的<p>标签是有1em大小的上下margin值的，为了效果统一，我们可以设置诸如下面的样式清除<p>标签的margin值：
.test_box p{ margin: 0; }
4、可编辑模式的div输入的内容都会是很正宗的HTML代码，如果作为内容提交的话需要进行HTML字符过滤。还有，如果您是从其他页面上拷贝一段内容过来，然后粘贴到可编辑模式下的<div>中，会连HTML也完整的复制过来的（不同于<textarea>），所以，这里也有必要进行HTML字符过滤
5、 IE6浏览器不支持max-height属性，所以，只用CSS是无法实现超过一定高度出现滚动条的效果，需要js配合实现。
6、 可编辑模式的div标签与textarea一样，是支持focus, blur事件的。自然也支持focus伪类。
Comments