Selezione del testo in div (contenteditable) quando si fa doppio clic

Question

Ho div con testo e contenteditable = "true". Quando clicco su questo div - funziona alcuni miei script, non è molto importante. E quando faccio doppio clic su questo div - è necessario modificare il testo in div. Il testo di modifica deve essere solo dopo il doppio clic, non dopo il singolo. E molto importante, quando faccio doppio clic su div - caret deve rimanere sotto il cursore del mouse. Non è necessario il testo di selezione. Ho trovato alcuni script per singolo/doppio. Ma hai un problema. Quando faccio doppio clic su div - il testo è la selezione. Selezione non necessaria. Hai bisogno di un editor di caret dove ho fatto clic. Non capisco come. http://jsfiddle.net/X6auM/

Answer 1

Ogni browser principale corrente fornisce un'API per creare un intervallo da un evento del mouse, sebbene siano necessari quattro rami di codice diversi.

Ecco alcuni retroscena:

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

Ecco una demo: http://jsfiddle.net/timdown/krtTD/10/

Ed ecco qualche codice:

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/