contenteditable兼容問題

正常情況下用contenteditable,IE下有兼容性問題需要將個別字母變成大寫的contentEditable。

獲取contenteditable的內容 對html進行處理 兼容 chrome、IE、Firefox

var html = $(this).html();
if(html){
    var lineSign = html.indexOf('<div>');
    if(html.indexOf('<p>') > -1){
        lineSign = html.indexOf('<p>');
    }
    if(lineSign !== 0){
        if(lineSign > 0){
            html = html.slice(0,lineSign);
        }
        $(this).prepend($('<div></div>',{html:html}));
    }
    data.opt.val = [];
    var h = '',brs = [];
    $(this).children('div,p').each(function(i,n){
        h = n.innerHTML;
        brs = h.split('<br>');
        if(brs.length > 0){
            $.each(brs,function(j,m){
                data.opt.val.push(m.replaceAll('&nbsp;','\t'));
            });
        }else{
            data.opt.val.push(m.replaceAll('&nbsp;','\t'));
        }
    });
}

1. 與contenteditable屬性無關的CSS控制法  

只有webkit內核瀏覽器才支持read-write-plaintext-only

一個div元素，要讓其可編輯，也就是可讀寫，contenteditable屬性是最常用方法，做前端的基本上都知道。但是，知道CSS中有屬性可以讓普通元素可讀寫的的同學怕是就少多了。

主角亮相：user-modify.

支持屬性值如下：

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

其中， write-only不用在意，當下這個年代，基本上沒有瀏覽器支持，以后估計也不會有。 read-only表示只讀，就是普通元素的默認狀態啦。

然后， read-write和 read-write-plaintext-only會讓元素表現得像個文本域一樣，可以 focus以及輸入內容

兩者的區別就在於，一個可以輸入富文本，而下面一個只能輸入純文本

read-write-plaintext-only {

1. -webkit-user-modify: read-write-plaintext-only;}

test {
    height: 100px;
    padding: 5px;
    border: 1px solid #a0b3d6;
    overflow: auto;}

<p class="test  read-write-plaintext-only"></p>

 

2. 使用標准contenteditable屬性值的HTML控制法

目前僅僅是Chrome瀏覽器支持比較好的。

contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"  
contenteditable="true"
contenteditable="false"