可编辑Div焦点问题

一，背景

自己最近用jquery-emoji发现光标有问题，因为他用可以编辑div导致，当他点击按钮弹出表情选择框的时候，光标会回到最开始的地方，这样子导致插入表情位置不对。

二，代码

/**
 * 扩展JS
 * by 鱼儿
 */

/**
 * 模块：div 可编辑支持光标修复
 */

//上次光标选中
var last_div_editor_sel

//上次选中范围
var last_div_editor_range = []

/**
 * 
 * @param {Element} div 
 */
function extendDivEditor(div){
    div.addEventListener('blur', onDivBlur)
    div.addEventListener('focus', onDivFocus)
}

function onDivBlur() {
    if(document.selection){
        //ie10或以下
        //暂时我还没有支持
    }else{
        var sel = window.getSelection()
        if(sel.rangeCount > 0){
            last_div_editor_range = []
            for(var index = 0; index < sel.rangeCount; index++){
                last_div_editor_range.push(sel.getRangeAt(index))
            }
        }
    }
}

function onDivFocus(){
    if(document.selection){
        //ie 10 或以下
        //暂时我还没有支持
    }else{
        var sel = window.getSelection()
        for(var index = 0; index < last_div_editor_range.length; index++){
            sel.removeAllRanges()
            sel.addRange(last_div_editor_range[index])
        }
    }
}

三，说明

调用extendDivEditor，传入div元素，这样子记录失去焦点的位置，当他获取焦点就回到原来点。我暂时没有写支持ie 10。

网上对selection 和range 介绍很少，自己参考别人代码，然后带蒙写的。