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怎么讀
如何讓contenteditable的div 在點擊其他div的時候不失焦
在web開發(fā)里 js如何獲取獲取div 的contentEditable內容 用于再提交
<html>
<head>
<title>獲取顯示 <DIV>contenteditable="true" 時輸入的內容</title>
</head>
<body>
<div id="kk" style="width:400px;height:300px;border:1px solid #999999;" contenteditable="true">
</div>
<input type="button" value="code" onclick="alert(document.getElementById('kk').innerHTML)" />
</body>
</html>
本文發(fā)布于:2023-02-28 19:21:00,感謝您對本站的認可!
本文鏈接:http://m.newhan.cn/zhishi/a/167761075259919.html
版權聲明:本站內容均來自互聯(lián)網(wǎng),僅供演示用,請勿用于商業(yè)和其他非法用途。如果侵犯了您的權益請與我們聯(lián)系,我們將在24小時內刪除。
本文word下載地址:contenteditable(contenteditable用于).doc
本文 PDF 下載地址:contenteditable(contenteditable用于).pdf
| 留言與評論(共有 0 條評論) |
|