看完张鑫旭的关于“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
。