Javascript 双击时在div中选择文本(内容可编辑)
我有一些文本和contenteditable=“true”的div。当我单击这个div-works我的一些脚本时,它不是很重要。当我双击这个div时-需要编辑div中的文本。编辑文本只需要在双击之后,而不需要在单次单击之后。非常重要的是,当我双击div时,插入符号需要停留在鼠标光标下。不需要选择文本。我找到了一些单曲/双曲的脚本。但我有问题。当我双击div时,文本被选中。选择不需要。需要我单击的编辑器插入符号。我不明白怎么做。Javascript 双击时在div中选择文本(内容可编辑),javascript,jquery,contenteditable,textselection,Javascript,Jquery,Contenteditable,Textselection,我有一些文本和contenteditable=“true”的div。当我单击这个div-works我的一些脚本时,它不是很重要。当我双击这个div时-需要编辑div中的文本。编辑文本只需要在双击之后,而不需要在单次单击之后。非常重要的是,当我双击div时,插入符号需要停留在鼠标光标下。不需要选择文本。我找到了一些单曲/双曲的脚本。但我有问题。当我双击div时,文本被选中。选择不需要。需要我单击的编辑器插入符号。我不明白怎么做。 尽管需要四个不同的代码分支,但当前每个主流浏览器都提供了一个API来
尽管需要四个不同的代码分支,但当前每个主流浏览器都提供了一个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;
};
单击编辑是
contenteditable
元素的预期结果。如果要使用双击,请仅在双击元素时将内容设置为可编辑。一旦可编辑,聚焦到元素,然后根据双击事件中的鼠标位置设置插入符号。最后,当焦点丢失时,禁用可编辑的内容。我不知道如何将光标精确地放置在单击的位置。使用.focus()进行此操作。但插入符号要转到行的开头。如果插入符号不在div中,如何找到它的位置?我找到了获取插入符号位置的脚本。脚本可以工作,但在这种情况下不行。太神奇了!昨天我做了一些其他的方法。但效果不是很好。你的版本很好用。非常感谢。一个建议,你的答案将是完整的,如果你解释你正在做什么以及。
$('p').dblclick(function(event) {
$this = $(this);
$this.attr('contenteditable', "true");
$this.blur();
$this.focus();
});