双击时div中的文本选择（contenteditable） [英] Text selection in div(contenteditable) when double click

问题描述

我有div有一些文字和contenteditable =true。当我单击这个div - 工作一些我的脚本时，它不是很重要。当我双击这个div时 - 需要编辑div中的文本。编辑文本只需要在双击之后，而不是单次之后。而且非常重要，当我双击div时 - 插入符号需要留在鼠标光标下。不需要选择文字。我发现了一些单/双脚本。但有问题。当我双击div - 文本是选择。选择没有必要。需要我点击的编辑器插入符号。我不明白怎么做。
http://jsfiddle.net/X6auM/

I have div with some text and contenteditable="true". When I single click on this div - works some my scripts, it is not very important. And when I double click on this div - need to edit text in div. Edit text need to be only after double click, not after single. And very imortant, when I double click on div - caret need stay under mouse cursor. No need selection text. I found some script for single/double. But have problem. When I double click on div - text are selection. Selection no need. Need editor caret where I clicked. I do not understand how. http://jsfiddle.net/X6auM/

推荐答案

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

Every current major browser provides an API to create a range from a mouse event, although there are four different code branches needed.

以下是一些背景信息：

• https://stackoverflow.com/a/10659990/96100


• https://stackoverflow.com/a/12705894/96100


• 创建一个FF / Webkit中像素位置的折叠范围

• 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;
};

这篇关于双击时div中的文本选择（contenteditable）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！