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