天天看點

如何設定DIV可編輯

如何設定DIV可編輯

如何讓一個div變成可編輯狀态,比如富文本的輸入框就可以用可編輯的div(自定義一個富文本時可用),類似textare。

有2種方案可以實作:1是通過contenteditable屬性設定為true,2是利用css的user-modify屬性。

方案一:contenteditable屬性

<div  id="add-content" contenteditable="true">這裡可以編輯</div>      

contenteditable 屬性是 html5 中的新屬性,contenteditable 屬性規定元素内容是否可編輯。

注釋:如果元素未設定 contenteditable 屬性,那麼元素會從其父元素繼承該屬性。

js操作:

監聽事件keydown 、textInput 、input

<script>
var content = document.getElementById('add-content')
//注冊中文的輸入事件,
var isCN = false;
content.addEventListener('compositionstart',function(){
    isCN = true;
});
content.addEventListener('compositionend',function(){
    isCN = false;
})
//注冊文本輸入事件,擷取光标的起止偏移資料,如果是非中文以及超出長度的輸入,則撤銷本次操作
var txtAnchorOffset, txtFocusOffset;
content.addEventListener("textInput",function(event){
    var _sel = document.getSelection();
    txtAnchorOffset = _sel.anchorOffset;
    txtFocusOffset = _sel.focusOffset;
    //必須加上isCN的判斷,否則擷取不到正确的光标資料
    if(!isCN && this.textContent.length >= noteMax){
        event.preventDefault();
    }
});
//注冊粘貼事件,擷取粘貼資料的長度
var pastedLength;  
content.addEventListener("paste",function(event){
    if(!event.clipboardData) return;
    pastedLength = event.clipboardData.getData('Text').length;
});


//注冊輸入事件,對輸入的資料進行
content.addEventListener("input",function(event){
    setTimeout(function(){
        if(!isCN){
            var _this = content;
            if(_this.textContent.length > noteMax){
                var data = _this.textContent;
                if(pastedLength > 1){
                    oldDate = data.slice(0, txtAnchorOffset) + data.slice(txtFocusOffset+pastedLength, data.length);
                    //粘貼字元串長度置為0,以免影響到下一次判斷。
                    pastedLength = 0;
                } else {
                    oldDate = data.slice(0, txtAnchorOffset) + data.slice(txtFocusOffset, data.length);
                }
                //再次截取最大長度字元串,防止溢出
                _this.textContent = oldDate.slice(0, noteMax);
                //光标移動到起始偏移位置
                document.getSelection().collapse(_this.firstChild, txtAnchorOffset);47             }
        }
    }, 0);
   //content.focus(); 
});
</script>      

方案二:css中user-modify屬性

<div id="add-content" >這裡可以編輯</div>
<style>
#add-content{
  user-modify: read-write;
  -webkit-user-modify: read-write;
}
</style>      

user-modify屬性,用來控制使用者能否對頁面文本進行編輯。與标簽的contentEditable屬性類似。文法如下:

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

參數說明:

read-only 内容隻讀。
read-write 内容可讀寫。(支援富文本)
read-write-plaintext-only 内容可讀寫,但粘貼内容中的富文本格式(如文本的顔色、大小,圖檔等)會丢失。内容類似于以純文字顯示。