成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

HTML contenteditable屬性

jimhs / 2577人閱讀

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

前言

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

用法

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

contenteditable有以下幾種屬性：

"true" 表明該元素可編輯

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

"inherit" （默認(rèn)）表明該元素繼承了其父元素的可編輯狀態(tài)


  This text can be edited by the user.

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


  
Edit this content to add your own quote

  
Edit this content to add your own quote - 2


可以使用css中caret-color屬性設(shè)置文本插入光標(biāo)的顏色。
實際用途

1.div模擬textarea文本域輕松實現(xiàn)高度自適應(yīng)
2.避免處理input、textarea的內(nèi)含樣式

CSS user-modify

使用css中的user-modify屬性，也可以讓普通元素可以讀寫。

/* Keyword values */
user-modify: read-only; (默認(rèn)值)
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的兼容性就沒那么理想了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114663.html

相關(guān)文章

  • HTML contenteditable屬性

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

    huayeluoliuhen 評論0 收藏0

  • 基于React的可編輯在線簡歷模板

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

    codecook 評論0 收藏0

  • html元素contenteditable屬性如何定位光標(biāo)和設(shè)置光標(biāo)

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

    kyanag 評論0 收藏0

  • 10行 JavaScript 實現(xiàn)文本編輯器

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

    laznrbfe 評論0 收藏0

發(fā)表評論

0條評論

jimhs

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<