HTML contenteditable属性

前言

以前一直没有留意到有contenteditable这个属性，今天忽然看到特地记录一下它的 用法 和 实际用途 ；

用法

为了某个使元素可编辑，你所要作的就是在html标签上设置"contenteditable"属性，它几乎支持全部的HTML元素。

contenteditable有如下几种属性：

• "true" 代表该元素可编辑
• "false" 代表该元素不可编辑
• "inherit" （默认）代表该元素继承了其父元素的可编辑状态

<div contenteditable="true">
  This text can be edited by the user.
</div>

经过一下代码，能够观察到若是子元素没有设置contenteditable属性，其默认值继承自父元素（既默认为"inherit"属性）

<div contenteditable="true">
  <p>Edit this content to add your own quote</p>
  <p>Edit this content to add your own quote - 2</p>
</div>

能够使用css中 caret-color属性设置文本插入光标的颜色。

实际用途

1.div模拟textarea文本域轻松实现高度自适应
2.避免处理input、textarea的内含样式

CSS user-modify

使用css中的user-modify属性，也能够让普通元素能够读写。

/* Keyword values */
user-modify: read-only; (默认值)
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only; (只容许输入纯文本，但兼容性不好)

/* Global values */
user-modify: inherit;
user-modify: initial;
user-modify: unset;

举个例子：

<div class="readwrite">The user is able to change this text.</div>

.readwrite {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
}

相对于 contenteditable而言， user-modify的兼容性就没那么理想了。