可编辑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 介绍很少,自己参考别人代码,然后带蒙写的。