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>