我这个怎么获取光标的位置？

Question

现在正在做一个留言的功能，想实现qq聊天输入框那种可以插入图片的效果，textarea没法插入图片
所以我使用的是html5的contenteditable属性来做。但是现在关键是怎么能够获取光标位置来确定在那个位置中显示图片。可是用这种方法没法获取到index值，显示的undefined,但是在换成textarea就可以获取光标的位置，有什么解决的方法吗？

Answer 1

哈哈；当年写这个带表情的评论功能写到流泪的表示；必须得分享下经验了；

可以先来体验下：http://baijunyao.com/article/58

/**
 * 在textarea光标后插入内容
 * @param  string  str 需要插入的内容
 */
function insertHtmlAtCaret(str) {
    var sel, range;
    if(window.getSelection){
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = str;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
                range.insertNode(frag);
            if(lastNode){
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(str);
    }
}

评论用到的js；
http://git.oschina.net/shuaib...

有源码可以整个下载下来慢慢研究：http://git.oschina.net/shuaib...

Answer 2

做了一个DEMO， 你看看怎么样