前端面试题——div 实现 textarea

如果要实现一个文本框，一般的做法会使使用<textarea></textarea>标签。但是如果要用<div></div>实现相同的功能，该怎么做呢？

首先来分析一下，需要通过div来实现哪些textarea的特性

可编辑

textarea 最主要的特性就是可编辑，如果不能编辑还叫什么文本框呢？

plain-text

文本框中只能够输入纯文本内容，而类似图片、视频这种无法输入

分析完 textarea 的基本特性以后，就要开始使用 div 来实现啦！

H5 新属性 —— contenteditable

contenteditable 属性规定一个元素是否可以被编辑

<div contenteditable="true"></div>�

上面代码中声明了一个 div，同时将他的 contenteditable 属性设置为了 true，这就表示这个 div 元素是可以被编辑的，点击这个 div，会实现自动聚焦并且可以输入

但是在实际使用中会发现，将这个属性设置为 true 以后，可以输入文字的同时，如果拖入一张图片，也会将这张图片显示出来，这与 textarea 的特性不符，需要将这个富文本的特性禁止

<div contenteditable="plaintext-only"></div>�

将 contenteditable 设置为 plaintext-only 就可以禁止输入富文本内容啦！

当然，也可以通过 css 的新属性来设置禁止富文本内容：

.plain-text {
    -webkit-user-modify: read-write-plaintext-only;
    -moz-user-modify: read-write-plaintext-only;
    user-modify: read-write-plaintext-only;
}

user-modify 的值还有 read-only 和 read-write

以上，我们就实现了一个 textarea 的基本功能了，当然，文本框还有很多其他的特性，例如 placeholder、resize等等，但是在实现文字输入的基本功能以后，要实现这些功能也并不复杂，不管是通过 css 的方式还是 js 的方式

扫码关注前端周记公众号