資訊專(zhuān)欄INFORMATION COLUMN
摘要：已經(jīng)從一個(gè)新的名詞變成了我們?cè)陧?xiàng)目中經(jīng)常用到的東西了，今天我們就來(lái)分析一番其中。在一個(gè)項(xiàng)目中有個(gè)多行文本的輸入，感覺(jué)異常難以控制，所以嘗試使用來(lái)模擬了一下。
HTML5已經(jīng)從一個(gè)新的名詞變成了我們?cè)陧?xiàng)目中經(jīng)常用到的東西了，今天我們就來(lái)分析一番其中contenteditable 。
contenteditable是HTML5的一個(gè)新的特性，有可能你也了解過(guò)一些，但是因?yàn)槟銢](méi)在項(xiàng)目中遇到過(guò)，只知道contenteditable="true"可以觸發(fā)可編輯，對(duì)于如何在項(xiàng)目中的應(yīng)用？會(huì)出現(xiàn)什么問(wèn)題呢？這些問(wèn)題就是我們今天要說(shuō)的。
先說(shuō)說(shuō)我遇到的。在一個(gè)項(xiàng)目中有個(gè)多行文本的輸入，感覺(jué)textarea異常難以控制，所以嘗試使用contenteditable="true"來(lái)模擬了一下。但是問(wèn)題特別的嚴(yán)重，他們的編輯內(nèi)容居然有css樣式，每次都會(huì)發(fā)出去一些代碼。然后就是復(fù)現(xiàn)問(wèn)題，發(fā)現(xiàn)他們內(nèi)容都是復(fù)制出來(lái)，然后他們常用的編輯器復(fù)制出來(lái)的內(nèi)容，會(huì)帶有css的表現(xiàn)為style標(biāo)簽。這樣下來(lái)是不是感覺(jué)沒(méi)有辦法？然后緊急切換回textarea？通常這個(gè)事情都是這樣結(jié)局的，但是我們的故事不能這樣結(jié)局。
contenteditable="plaintext-only" 從單詞上看來(lái)是純文本，那么我們測(cè)試一下 http://jsrun.net/hcYKp
是不是特別的神奇呢？別急，css其實(shí)也是可以控制是否可以編輯-webkit-user-modify: read-write-plaintext-only，那么我們測(cè)試一下 http://jsrun.net/hcYKp
當(dāng)然這么酷的東西，兼容還不是很好，測(cè)試最好是在chrome里面進(jìn)行
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/50997.html
摘要：已經(jīng)從一個(gè)新的名詞變成了我們?cè)陧?xiàng)目中經(jīng)常用到的東西了，今天我們就來(lái)分析一番其中。在一個(gè)項(xiàng)目中有個(gè)多行文本的輸入，感覺(jué)異常難以控制，所以嘗試使用來(lái)模擬了一下。 HTML5已經(jīng)從一個(gè)新的名詞變成了我們?cè)陧?xiàng)目中經(jīng)常用到的東西了，今天我們就來(lái)分析一番其中contenteditable 。 contenteditable是HTML5的一個(gè)新的特性，有可能你也了解過(guò)一些，但是因?yàn)槟銢](méi)在項(xiàng)目中遇到過(guò)...
摘要：總結(jié)最后介紹一下整個(gè)頁(yè)面的功能可以對(duì)每個(gè)字段進(jìn)行編輯可以對(duì)列表字段隨意添加移動(dòng)刪除可以直接使用的語(yǔ)法來(lái)插入鏈接可以上傳本地頭圖可以保存為三種格式在線(xiàn)預(yù)覽地址戳我倉(cāng)庫(kù)戳我，歡迎 在線(xiàn)預(yù)覽地址：戳我 GitHub倉(cāng)庫(kù): 戳我，歡迎star 介紹 技術(shù)棧為純React。接下來(lái)介紹一些稍微重要的技術(shù)點(diǎn)： contentEditable 核心的編輯功能用到了HTML5的 contentEdi...
閱讀 3653·2021-10-11 10:58
閱讀 2245·2021-10-08 10:05
閱讀 2024·2021-09-27 13:34
閱讀 3558·2019-08-30 15:53
閱讀 2723·2019-08-30 14:02
閱讀 3551·2019-08-29 16:55
閱讀 614·2019-08-29 15:41
閱讀 1062·2019-08-29 15:23
