這篇文章主要講解了“html5中contenteditable的屬性和使用方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“html5中contenteditable的屬性和使用方法”吧！

專注于為中小企業(yè)提供網(wǎng)站設計、成都做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)合山免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

contenteditable使用方法

方法一：

1<divcontenteditable="plaintext-only"id="content"></div>

方法二：基于css

1user-modify:read-write-plaintext-only;

2-webkit-user-modify:read-write-plaintext-only

如果在非webkit的內核，我們需要考慮使用js來實現(xiàn)，首先想到的是：

1vard=document.getElementById("content");

2document.addEventListener("keydown",function(){

3d.innerHTML=d.innerHTML.replace(/<[^>]*>/g,"");

4});

發(fā)現(xiàn)效果同上面大體一樣，這樣雖然能過濾樣式，但是有很多問題，比如光標始終在首位、輸入框不能插入表情、換行符失效等問題。上網(wǎng)查了一下別人是怎么做的發(fā)現(xiàn)可以通過修改復制事件來過濾樣式：

contenteditable代碼

1functionpasteFilter(e){

2e.preventDefault();

3vartext=null;

4//得到剪貼板中的文本

5if(window.clipboardData&&clipboardData.setData){

6//IE

7text=window.clipboardData.getData('text');

8}else{

9try{

10text=(e.originalEvent||e).clipboardData.getData('text/plain');

11}catch(e){

12return;

13}

14};

感謝各位的閱讀，以上就是“html5中contenteditable的屬性和使用方法”的內容了，經(jīng)過本文的學習后，相信大家對html5中contenteditable的屬性和使用方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設公司，，小編將為大家推送更多相關知識點的文章，歡迎關注！

本文標題：html5中contenteditable的屬性和使用方法-創(chuàng)新互聯(lián)
分享URL：http://jinyejixie.com/article4/dipsoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、品牌網(wǎng)站制作、Google、網(wǎng)站制作、虛擬主機、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)