国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML contenteditable屬性

jimhs / 2564人閱讀

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

前言

之前一直沒(méi)有留意到有contenteditable這個(gè)屬性，今天突然看到特意記錄一下它的 用法 和 實(shí)際用途 ；

用法

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

contenteditable有以下幾種屬性：

"true" 表明該元素可編輯

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

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


  This text can be edited by the user.

通過(guò)一下代碼，可以觀察到如果子元素沒(méi)有設(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)的顏色。
實(shí)際用途

1.div模擬textarea文本域輕松實(shí)現(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;

舉個(gè)例子：

The user is able to change this text.
.readwrite {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
}
相對(duì)于contenteditable而言，user-modify的兼容性就沒(méi)那么理想了。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114663.html

相關(guān)文章

  • HTML contenteditable屬性

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

    huayeluoliuhen 評(píng)論0 收藏0

  • 基于React的可編輯在線簡(jiǎn)歷模板

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

    codecook 評(píng)論0 收藏0

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

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

    kyanag 評(píng)論0 收藏0

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

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

    laznrbfe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

jimhs

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<