input和textarea的区别

都是提供用户输入的标签。区别如下：

• input 单行文本输入框 textarea多行文本输入框
• input textarea都可以通过width height设置宽高，textarea还可以通过cols rows来设置显示的行数和列数
• input textarea都可以通过maxlength来设置最多输入的字符数，input的size是最多展示出来的字符数，类似于textarea的cols属性
• input有value属性，无法自动换行，textarea值是标签对之间，可以自动换行

用一个div模拟textarea，可以利用块级元素的contenteditable属性，代码如下：

.textarea {
     border: 1px solid #ccc;
    padding: 20px;
    width: 200px;
    min-height: 100px;
    /* 可以设置一个最大高度，超出时滚动，否则，高度会被撑开 */
    /* max-height: 300px; */
    overflow: auto;
}
    
<div class="textarea" contenteditable="true"></div>

这样子，就可以模拟textarea了，但是这样设置，拷贝进来的文本支持html，要想过滤掉html，只支持纯文本，需要设置contenteditable：plaintext-only或者设置webkit-user-modify: read-write-plaintext-only; （user-modify只有webkit内核支持）