双击时div中的文本选择（contenteditable）
我有一些文本div和contenteditable =“true”。 当我单击这个div – 工作一些我的脚本时，它不是很重要。 当我双击这个div时 – 需要编辑div中的文本。 编辑文本只需要在双击之后，而不是单次之后。 而且非常重要，当我双击div时 – 插入符号需要留在鼠标光标下。 不需要选择文字。 我发现了一些单/双脚本。 但有问题。 当我双击div – 文本是选择。 选择没有必要。 需要我点击的编辑器插入符号。 我不明白怎么做。 http://jsfiddle.net/X6auM/
每个当前的主要浏览器都提供了一个API来创建鼠标事件的范围，尽管需要四个不同的代码分支。
这是一些背景：
- https://stackoverflow.com/a/10659990/96100
- https://stackoverflow.com/a/12705894/96100
- 从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; };
$('p').dblclick(function(event) { $this = $(this); $this.attr('contenteditable', "true"); $this.blur(); $this.focus(); });