contenteditable(contenteditable用于)

更新時間:2023-03-01 02:59:12 閱讀：評論：0

contenteditable屬性

contenteditable通俗來講就是一個編輯器。

contenteditable 屬性是 HTML5 中的新屬性。規(guī)定是否可編輯元素的內容。
屬性值
true 規(guī)定可以編輯元素內容。
fal 規(guī)定無法編輯元素內容。
例：

很多人剛開始接觸contenteditable這個屬性時都會想到textarea。
textarea支持多行文本輸入，滿足了我們編輯的很大需求。然而，textarea不能像div一樣高度自適應，高度保持不變，內容大于高度時就會出現(xiàn)滾動條。而且textarea只支持文本輸入，隨著現(xiàn)在越來越關注用戶體驗，需求也越來越多，很多時候我們需要在編輯區(qū)域插入圖片，鏈接，視頻。
現(xiàn)在我們有一個很簡單的實現(xiàn)辦法，就是讓一個div標簽（高度自適應block元素）模擬編輯器。即在div里加入contenteditable="true"屬性；
例：

在設置了contenteditable屬性的元素中插入圖片，鏈接，商品等；

此處還涉及到一個window.getSelection知識點，在接下來的文章會詳細介紹。

讓contenteditable元素只能輸入純文本
（1）css控制法
一個div元素，要讓其可編輯，contenteditable屬性是最常用方法，CSS中也有屬性可以讓普通元素可讀寫。

ur-modify.

支持屬性值如下：

read-write和read-write-plaintext-only會讓元素表現(xiàn)得像個文本域一樣，可以focus以及輸入內容
（2）contenteditable控制法

"plaintext-only"可以讓編輯區(qū)域只能鍵入純文本

* 注意：目前僅僅是Chrome瀏覽器支持比較好的

后續(xù)會繼續(xù)更新。
歡迎反饋，感謝閱讀！

contenteditable怎么讀

英文原文：
content editable
英式音標：
[kənˈtent] editable
美式音標：
[ˈkɑntɛnt] editable

如何讓contenteditable的div 在點擊其他div的時候不失焦

將DIV對象的contenteditable屬性設置為true之后,再插入一個表格,就能編輯了.代碼如下: abc function doit(){ var abc=document.getElementById('abc'); abc.contentEditable=true; abc.innerHTML+=' ' }