Выделение текста в div(contenteditable) при двойном щелчке

Question

У меня есть div с некоторым текстом и contenteditable="true". Когда я нажимаю один раз на этот div - работает несколько моих скриптов, это не очень важно. И когда я дважды щелкаю на этом div - нужно редактировать текст в div. Редактировать текст нужно только после двойного щелчка, а не после одиночного. И очень важно, когда я дважды щелкаю на div - курсор должен оставаться под курсором мыши. Нет необходимости выделения текста. Я нашел какой-то скрипт для одного / двойного. Но есть проблема. Когда я дважды нажимаю на div - текст выделен. Выбор не нужен. Нужен редактор карет, где я нажал. Я не понимаю, как. http://jsfiddle.net/X6auM/

Answer 1

В каждом текущем крупном браузере есть API для создания диапазона из события мыши, хотя необходимы четыре разные ветви кода.

Вот немного предыстории:

• /questions/20248777/peretaschite-izobrazhenie-v-contenteditable-v-chrome-do-kursora/20248787#20248787
• /questions/47664583/javascript-obnaruzhivaet-smeschenie-teksta-v-uzle-v-pozitsii/47664589#47664589
• Создание свернутого диапазона из позиции пикселя в 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;
};

Answer 2

$('p').dblclick(function(event) {
  $this = $(this);
  $this.attr('contenteditable', "true");
  $this.blur();
  $this.focus();
});

http://jsfiddle.net/krtTD/90/

Answer 3

Улучшение принятого ответа, которое не создает временную вспышку, в нем используется свойство выбора пользователя css в своих интересах