![](/img/trans.png)
[英]Is there a way to not lose focus selection when replacing HTML with text in an contenteditable div?
[英]Text selection in div(contenteditable) when double click
我有一些文本和 contenteditable="true" 的 div。 当我单击这个 div 时 - 可以运行我的一些脚本,这不是很重要。 当我双击这个 div 时 - 需要在 div 中编辑文本。 编辑文本只需要双击后即可,而不是单击后。 非常重要的是,当我双击 div 时 - 插入符号需要停留在鼠标光标下。 无需选择文本。 我找到了一些单/双脚本。 但是有问题。 当我双击 div - 文本是选择。 选择不需要。 需要我点击的编辑器插入符号。 我不明白怎么办。 http://jsfiddle.net/X6auM/
当前的每个主要浏览器都提供了一个 API 来从鼠标事件创建一个范围,尽管需要四个不同的代码分支。
这是一些背景:
这是一个演示: 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;
};
$('p').dblclick(function(event) {
$this = $(this);
$this.attr('contenteditable', "true");
$this.blur();
$this.focus();
});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- <link rel="stylesheet" href="../tailwind.css" /> --> </head> <body> <div id="editor" style="user-select:none;" contenteditable="false">Some editableasa text. Double click to eadsit</div> <script> 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); selectRange(caretRange); this.style = "" }; </script> </body> </html>
已接受的答案的改进,它不会创建临时闪存,它使用 css 用户选择属性来发挥它的优势
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.