div实现textarea文字输入

近期正在开发一个项目时,需要有一个想表单里面写入文本,别切表单随着文字的增加自动铺开,一开始使用textarea这个控件,但是这个需要用到js去做一个resize处理,比较麻烦,在网上看到一片博客用div模拟这种效果。

解决办法:
在html5中有一个`contenteditable特性,意思是说

允许用户编辑元素内容包含的任意文本,包括子元素。

这个属性的兼容心也无需考虑,因为IE很早就支持此标签属性了

下面用代码示例:

<div class="box" contenteditable="true"><br /></div> 
.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;
    -webkit-user-select:text;
}

我们给div设置了一个max-height当文章内容超过这个高度时,会出现滚动条

添加新评论