html编辑器双击事件,javascript – 双击时div中的文本选择(contenteditable)

每个当前的主要浏览器都提供了一个API来创建鼠标事件的范围,尽管需要四个不同的代码分支.

这是一些背景：

这里是一些代码：

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);

}, 10);

return false;

};