可编辑div的使用，实现类似textarea功能

简介

最近在做项目中遇到一个有意思的功能：在一个文本域中不仅可以输入正常的汉字和英文，还可以在光标处插入一些自定义的内容，如：“《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就可删除插入的自定义内容，而火狐需要用鼠标整体选取插入的自定义内容然后按退格键才可以删除。