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的兼容性就沒那麼理想了。