Imposta la posizione di inserimento a destra dopo l'elemento inserito in un contentEditable div

Question

Inserisco un elemento in un content contentabile ma il browser imposta la posizione del cursore prima dell'elemento inserito. È possibile impostare il cursore subito dopo l'elemento inserito in modo che l'utente continui a digitare senza dover regolare nuovamente la posizione del cursore?

Answer 1

La seguente funzione lo farà. Gli oggetti DOM Level 2 Range lo rendono facile nella maggior parte dei browser. In IE, devi inserire un elemento marker dopo il nodo che stai inserendo, spostare la selezione su di esso e quindi rimuoverlo.

vivo esempio: http://jsfiddle.net/timdown/4N4ZD/

Codice:

function insertNodeAtCaret(node) { 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var range = sel.getRangeAt(0); 
      range.collapse(false); 
      range.insertNode(node); 
      range = range.cloneRange(); 
      range.selectNodeContents(node); 
      range.collapse(false); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") { 
     var html = (node.nodeType == 1) ? node.outerHTML : node.data; 
     var id = "marker_" + ("" + Math.random()).slice(2); 
     html += '<span id="' + id + '"></span>'; 
     var textRange = document.selection.createRange(); 
     textRange.collapse(false); 
     textRange.pasteHTML(html); 
     var markerSpan = document.getElementById(id); 
     textRange.moveToElementText(markerSpan); 
     textRange.select(); 
     markerSpan.parentNode.removeChild(markerSpan); 
    } 
} 

In alternativa, è possibile utilizzare la mia Rangy library. Il codice equivalente ci sarebbe

function insertNodeAtCaret(node) { 
    var sel = rangy.getSelection(); 
    if (sel.rangeCount) { 
     var range = sel.getRangeAt(0); 
     range.collapse(false); 
     range.insertNode(node); 
     range.collapseAfter(node); 
     sel.setSingleRange(range); 
    } 
} 

Answer 2

Se si sta inserendo un div vuoto, p o luce, credo che ci deve essere "qualcosa" all'interno dell'elemento appena creato per la gamma a cui aggrapparsi - e in per mettere il cursore all'interno.

Ecco il mio trucco che sembra funzionare correttamente in Chrome. L'idea è semplicemente di inserire una stringa temporanea all'interno dell'elemento, quindi rimuoverla una volta che il punto di inserimento è all'interno.

// Get the selection and range 
var idoc = document; // (In my case it's an iframe document) 
var sel = idoc.getSelection(); 
var range = sel.getRangeAt(0); 

// Create a node to insert 
var p = idoc.createElement("p"); // Could be a div, span or whatever 

// Add "something" to the node. 
var temp = idoc.createTextNode("anything"); 
p.appendChild(temp); 
// -- or -- 
//p.innerHTML = "anything"; 

// Do the magic (what rangy showed above) 
range.collapse(false); 
range.insertNode(p); 
range = range.cloneRange(); 
range.selectNodeContents(p); 
range.collapse(false); 
sel.removeAllRanges(); 
sel.addRange(range); 

// Clear the non 
p.removeChild(p.firstChild); 
// -- or -- 
//p.innerHTML = "";