Wybór tekstu w div (contenteditable) po dwukrotnym kliknięciu

Question

Mam div z tekstem i contenteditable = "true". Kiedy pojedynczo klikam na tym div - działa kilka moich skryptów, nie jest to bardzo ważne. I kiedy dwukrotnie klikam na tym div - trzeba edytować tekst w div. Edytuj tekst musi być tylko po dwukrotnym kliknięciu, a nie po singlu. I bardzo ważne, gdy dwukrotnie klikam na div - opiekun musi pozostać pod kursorem myszy. Nie ma potrzeby wyboru tekstu. Znalazłem jakiś skrypt dla pojedynczego/podwójnego. Ale mam problem. Po dwukrotnym kliknięciu div - tekst są zaznaczone. Wybór nie jest potrzebny. Potrzebujesz pomocy redaktora, gdzie kliknąłem. Nie rozumiem jak. http://jsfiddle.net/X6auM/

Answer 1

Każda obecna większa przeglądarka udostępnia interfejs API do tworzenia zakresów od zdarzenia myszy, chociaż potrzebne są cztery różne gałęzie kodu.

Oto tło:

• https://stackoverflow.com/a/10659990/96100
• https://stackoverflow.com/a/12705894/96100
• Creating a collapsed range from a pixel position in FF/Webkit

Oto demo: http://jsfiddle.net/timdown/krtTD/10/

A oto niektóre kod:

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/