我有一个带有一些文本和 contenteditable="true"的 div。当我单击此 div - 运行我的一些脚本时,它不是很重要。当我双击这个 div - 需要编辑 div 中的文本。编辑文本只需要在双击之后,而不是在单击之后。非常重要,当我双击 div - 插入符号需要停留在鼠标光标下。无需选择文本。我找到了一些单/双脚本。但是有问题。当我双击 div - 文本被选中。选择不需要。我点击的地方需要编辑插入符号。我不明白怎么办。 http://jsfiddle.net/X6auM/
最佳答案
尽管需要四个不同的代码分支,但当前的每个主要浏览器都提供了一个 API 来从鼠标事件创建范围。
这里是一些背景:
- https://stackoverflow.com/a/10659990/96100
- https://stackoverflow.com/a/12705894/96100
- Creating a collapsed range from a pixel position in FF/Webkit
这是一个演示:http://jsfiddle.net/timdown/krtTD/10/
下面是一些代码:
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;
};
关于javascript - 双击时div中的文本选择(contenteditable),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12920225/