資訊專欄INFORMATION COLUMN
摘要：已經(jīng)從一個(gè)新的名詞變成了我們?cè)陧?xiàng)目中經(jīng)常用到的東西了，今天我們就來分析一番其中。在一個(gè)項(xiàng)目中有個(gè)多行文本的輸入，感覺異常難以控制，所以嘗試使用來模擬了一下。
HTML5已經(jīng)從一個(gè)新的名詞變成了我們?cè)陧?xiàng)目中經(jīng)常用到的東西了，今天我們就來分析一番其中contenteditable 。
contenteditable是HTML5的一個(gè)新的特性，有可能你也了解過一些，但是因?yàn)槟銢]在項(xiàng)目中遇到過，只知道contenteditable="true"可以觸發(fā)可編輯，對(duì)于如何在項(xiàng)目中的應(yīng)用？會(huì)出現(xiàn)什么問題呢？這些問題就是我們今天要說的。
先說說我遇到的。在一個(gè)項(xiàng)目中有個(gè)多行文本的輸入，感覺textarea異常難以控制，所以嘗試使用contenteditable="true"來模擬了一下。但是問題特別的嚴(yán)重，他們的編輯內(nèi)容居然有css樣式，每次都會(huì)發(fā)出去一些代碼。然后就是復(fù)現(xiàn)問題，發(fā)現(xiàn)他們內(nèi)容都是復(fù)制出來，然后他們常用的編輯器復(fù)制出來的內(nèi)容，會(huì)帶有css的表現(xiàn)為style標(biāo)簽。這樣下來是不是感覺沒有辦法？然后緊急切換回textarea？通常這個(gè)事情都是這樣結(jié)局的，但是我們的故事不能這樣結(jié)局。
contenteditable="plaintext-only" 從單詞上看來是純文本，那么我們測(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://m.specialneedsforspecialkids.com/yun/50997.html
摘要：已經(jīng)從一個(gè)新的名詞變成了我們?cè)陧?xiàng)目中經(jīng)常用到的東西了，今天我們就來分析一番其中。在一個(gè)項(xiàng)目中有個(gè)多行文本的輸入，感覺異常難以控制，所以嘗試使用來模擬了一下。 HTML5已經(jīng)從一個(gè)新的名詞變成了我們?cè)陧?xiàng)目中經(jīng)常用到的東西了，今天我們就來分析一番其中contenteditable 。 contenteditable是HTML5的一個(gè)新的特性，有可能你也了解過一些，但是因?yàn)槟銢]在項(xiàng)目中遇到過...
摘要：總結(jié)最后介紹一下整個(gè)頁面的功能可以對(duì)每個(gè)字段進(jìn)行編輯可以對(duì)列表字段隨意添加移動(dòng)刪除可以直接使用的語法來插入鏈接可以上傳本地頭圖可以保存為三種格式在線預(yù)覽地址戳我倉庫戳我，歡迎 在線預(yù)覽地址：戳我 GitHub倉庫: 戳我，歡迎star 介紹 技術(shù)棧為純React。接下來介紹一些稍微重要的技術(shù)點(diǎn)： contentEditable 核心的編輯功能用到了HTML5的 contentEdi...
閱讀 3662·2021-10-11 10:58
閱讀 2252·2021-10-08 10:05
閱讀 2034·2021-09-27 13:34
閱讀 3575·2019-08-30 15:53
閱讀 2734·2019-08-30 14:02
閱讀 3562·2019-08-29 16:55
閱讀 623·2019-08-29 15:41
閱讀 1071·2019-08-29 15:23
