HTML contenteditable屬性

huayeluoliuhen 發布于2019-08-02 16:18 / 1209人閱讀

摘要：前言之前一直沒有留意到有這個屬性，今天突然看到特意記錄一下它的用法和實際用途用法為了某個使元素可編輯，你所要做的就是在標簽上設置屬性，它幾乎支持所有的元素。

前言

之前一直沒有留意到有contenteditable這個屬性，今天突然看到特意記錄一下它的用法和 實際用途 ；

用法

為了某個使元素可編輯，你所要做的就是在html標簽上設置"contenteditable"屬性，它幾乎支持所有的HTML元素。

contenteditable有以下幾種屬性：

"true" 表明該元素可編輯

"false" 表明該元素不可編輯

"inherit" （默認）表明該元素繼承了其父元素的可編輯狀態


  This text can be edited by the user.

通過一下代碼，可以觀察到如果子元素沒有設置contenteditable屬性，其默認值繼承自父元素（既默認為"inherit"屬性）


  Edit this content to add your own quote
  Edit this content to add your own quote - 2

可以使用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;

舉個例子：

The user is able to change this text.

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

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

云服務器 GPU云服務器 contenteditable html屬性 html 數據屬性 html 變形屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/55055.html

HTML contenteditable屬性

摘要：前言之前一直沒有留意到有這個屬性，今天突然看到特意記錄一下它的用法和實際用途用法為了某個使元素可編輯，你所要做的就是在標簽上設置屬性，它幾乎支持所有的元素。前言之前一直沒有留意到有contenteditable這個屬性，今天突然看到特意記錄一下它的用法和實際用途；用法為了某個使元素可編輯，你所要做的就是在html標簽上設置contenteditable屬性，它幾乎支持所...

jimhs 2019-08-30 10:56 評論0 收藏0
基于React的可編輯在線簡歷模板

摘要：總結最后介紹一下整個頁面的功能可以對每個字段進行編輯可以對列表字段隨意添加移動刪除可以直接使用的語法來插入鏈接可以上傳本地頭圖可以保存為三種格式在線預覽地址戳我倉庫戳我，歡迎在線預覽地址：戳我 GitHub倉庫: 戳我，歡迎star 介紹技術棧為純React。接下來介紹一些稍微重要的技術點： contentEditable 核心的編輯功能用到了HTML5的 contentEdi...

codecook 2019-08-22 15:20 評論0 收藏0
html元素contenteditable屬性如何定位光標和設置光標

摘要：最近在山寨一款網頁微信的產品，對于用屬性做的編輯框有不少心得，希望可以幫到入坑的同學。在里面，光標是一個對象，光標對象是只有當你選中某個元素的時候才會出現的。，現在我們來實際操作光標了。最近在山寨一款網頁微信的產品，對于div用contenteditable屬性做的編輯框有不少心得，希望可以幫到入坑的同學。廢話不多說了，我們先來理解一下HTML的光標對象是如何工作的，后面我會貼完整...

kyanag 2019-08-19 18:41 評論0 收藏0
10行 JavaScript 實現文本編輯器

摘要：但是，現在我只需要一個很基本的內容輸入內容編輯的功能，如粗體斜體列表對齊等。的作用相當神奇，可以讓或整個網頁，以及等等元素設置為可編輯。現在，事情就很簡單了，我們把要執行的命令放到屬性中，然后編寫簡單的都可以很容易地完成編輯器功能了。背景我們平時用到的瀏覽器編輯器功能都會比較多，實現的代碼邏輯也會非常復雜，往往是作為一個單獨插件被引入進來的。但是，現在我只需要一個很基本的內容輸入內...

laznrbfe 2019-08-20 14:31 評論0 收藏0