contenteditable(html5中contenteditable的屬性和使用方法)

　　contenteditable使用方法

　　方法一:

　　1<pcontenteditable="plaintext-only"id="content"></p>

　　方法二:基于css

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

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

　　如果在非webkit的內核,我們需要考慮使用js來實現,首先想到的是:

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

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

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

　　4});

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

　　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的屬性和使用方法”的內容了,經過本文的學習后,相信大家對html5中contenteditable的屬性和使用方法這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是本站,小編將為大家推送更多相關知識點的文章,歡迎關注!