Text selection in div(contenteditable) when double click

背景：

     在最近项目中，碰到一个问题：有一个可编辑的div需要双击时可编辑，blur或者回车时将编辑结果保存。你可能注意到双击时，文字会被选中，可编辑区域不会focus到光标位置。考虑到兼容性问题，写了如下代码。做个备份，以备不时之需。

js:

function getMouseEventCaretRange(evt) {
    
    var range, x = evt.clientX, y = evt.clientY;
    
        // Try the simple IE way first
        if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToPoint(x, y);
        }
    
    else if (typeof document.createRange != "undefined") {
        // Try Mozilla's rangeOffset and rangeParent properties, which are exactly what we want
        
        if (typeof evt.rangeParent != "undefined") {
            range = document.createRange();
            range.setStart(evt.rangeParent, evt.rangeOffset);
            range.collapse(true);
        }
    
        // Try the standards-based way next
        else if (document.caretPositionFromPoint) {
            var pos = document.caretPositionFromPoint(x, y);
            range = document.createRange();
            range.setStart(pos.offsetNode, pos.offset);
            range.collapse(true);
        }
    
        // Next, the WebKit way
        else if (document.caretRangeFromPoint) {
            range = document.caretRangeFromPoint(x, y);
        }
    }
    
    return range;
}

function selectRange(range) {
    if (range) {
        if (typeof range.select != "undefined") {
            range.select();
        } else if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

document.getElementById("editor").ondblclick = function(evt) {
    evt = evt || window.event;
    this.contentEditable = true;
    this.focus();
        var caretRange = getMouseEventCaretRange(evt);
      // Set a timer to allow the selection to happen and the dust settle first
    window.setTimeout(function() {
        selectRange(caretRange);
    }, 0);
  
    return false;
};

html:

<div id="editor" contenteditable="false">Some editable text. Double click to edit</div>