替代textarea的contenteditable样式

<textarea name="" id="" cols="30" rows="10"></textarea>
<div style="width: 400px;height: 400px;border:1px solid #dbdbdb;" contenteditable="true"></div>

今天在做新课的时候正好写到<textarea>文本域标签，这个标签可以用于输入文字，这个不用说了很简单。但是它有一些自带的样式很恶心比如：


另外这个边框调起来也很费劲，所以非常不喜欢用。本人最喜欢div，因为它的可塑性比较强。那么有的小伙伴儿肯定知道“contenteditable”！


contenteditable


这玩意儿是什么，给小白同学说一下。 它是HTML 5全局的一个新属性。怎么用呢？你给一个div标签里加一个它然后试试。
<div contenteditable="true"></div>
然后你会发现，你可以直接在div中输入文字，相当于一个可控的文本域。


有同学happy了，但这不是我遇到的问题。。。。。。


于是我就百度了～～～然后偶然间发现一个我没注意过的问题


富文本和纯文本


普及一下这两个的区别，看下图：


同时复制粘贴一段文字和图，富文本则可以全部显示样式图片等，而纯文本却不能。写法如下：


富文本
<div contenteditable="true"></div>


纯文本
<div contenteditable="plaintext-only"></div>


在张鑫旭老师的博客中看到了关于css控制该样式的方法：
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only;//这个！
貌似没用，但是少看了一句话


目前只有webkit内核浏览器才支持read-write-plaintext-only这个值，因此，我们的使用其实是：
-webkit-user-modify: 
read-write-plaintext-only;