簡介

最近在做專案中遇到一個有意思的功能：在一個文字域中不僅可以輸入正常的漢字和英文，還可以在游標處插入一些自定義的內容，如：“《java程式設計思想》”，那麼這本書的書名和書名號作為一個整體插入到游標處，要刪除也是一起刪除不可以單獨刪除幾個字，很顯然用傳統的textarea是不可能實現的，這裡解決的辦法是用可編輯的div代替textarea。

具體實現

1. 在jsp頁面上新增div標籤，自定義寬高、背景填充為白色（就是為了做的像textarea），一定要注意在div標籤內新增屬性contenteditable=”true”，這個屬性意思是該div為可編輯div。
2. 此時div中可以輸入正常的文字內容，接下來書寫js程式碼實現插入自定義內容。

function insertBook(bookMessage){
    var tc = document.getElementById("bookTextarea");  
    tc.focus();  
    if(typeof document.selection != "undefined"){  
        var range = document.selection.createRange();   
        range.pasteHTML("<div class='data' englishName="+bookMessage[0].englishName
 
+"  contentEditable='false' id="+bookMessage[0].id+">《"+bookMessage[0].name+"》</div>");
    } else if(window.getSelection()!=undefined){
        var range = window.getSelection().getRangeAt(0);
        range.collapse(false);
        var node = range.createContextualFragment("<div class='data'  contentEditable='false' id="
 
+bookMessage[0].id+">《"+bookMessage[0].name+"》</div");
        var c = node.lastChild;
        range.insertNode(node);
        if(c){
           range.setEndAfter(c);
           range.setStartAfter(c)
        }
        var j = window.getSelection();
        j.removeAllRanges();
        j.addRange(range);
    }
}

• 該js方法insertBook就是將書的資訊作為整體放在可編輯div中的，可以看到程式碼中相容了ie（document.selection）和火狐（window.getSelection()）。
• bookTextarea為可編輯div的id，傳入的引數bookMessage為書資訊的json串。
• ie下document.selection.createRange()方法為獲取游標位置。
• range.pasteHTML(）方法為將內容以html的形式解析到頁面。
• 火狐同理只是寫法不同。

重點

1. 整個js程式碼的關鍵在於將書的資訊放在一個不可編輯的div中，即

<div class='data' contentEditable='false' id="+bookMessage[0].id+">《"+bookMessage[0].name+"》</div>

注意一定要新增屬性contentEditable=’false’，不然它會跟隨父div變成一個可編輯的div，那時就不能作為一個整體刪除了。
2.然後將1中的div以html標籤的形式解析到頁面上，不然會把整個標籤看作是文字解析到頁面上的，ie的做法是用range.pasteHTML（）方法解析1中的div到頁面，火狐自己看程式碼吧。

注意事項

1.正常在可編輯的div中輸入的字是黑色的，可以將解析到頁面的div內容換個顏色用於區分。
2.ie和火狐刪除的方式略有不同，ie下按退格鍵即Backspace就可刪除插入的自定義內容，而火狐需要用滑鼠整體選取插入的自定義內容然後按退格鍵才可以刪除。