jquery Establecer la posición del cursor en contenteditable div

Question

La versión anterior de la pregunta está debajo, después de investigar más, decidí reformular la pregunta. El problema es que antes, necesito enfocar una div contenida sin resaltar el texto, haciendo el enfoque directo resalta el texto en Chrome.

Me doy cuenta de que las personas resolvieron este problema en áreas de texto al restablecer la posición de intercalación en el área de texto. ¿Cómo puedo hacer eso con un elemento contento? Todos los complementos que he intentado solo funcionan con textareas. Gracias.

vieja redacción de la pregunta:

que tiene un elemento contenteditable que me quiero centrar, pero sólo en la medida en para colocar el cursor en la parte delantera de el elemento, en lugar de seleccionar todo.

elem.trigger('focus'); con jquery selecciona todo el texto en todo el elemento en cromo. Firefox se comporta correctamente en , configurando el símbolo de intercalación en el frente del texto. ¿Cómo puedo obtener Chrome para que se comporte de la manera que quiero, o es foco tal vez no lo que estoy buscando para.

Gracias a todos.

Answer 1

demostración: http://so.devilmaycode.it/jquery-setting-cursor-position-in-contenteditable-div/

 <div id="editable" contentEditable="true"> 
      <h2>Lorem</h2> <p>ipsum dolor <i>sit</i> 
       amet, consectetur <strong>adipiscing</strong> elit.</p> Aenean. 
     </div> 

---

<script type="text/javascript"> 
     $(function() { 
      $('[contentEditable="true"]').on('click', function (e) { 
       if (!$(this).hasClass('editing')) { 
        var html = $(this).html(); 
        if (html.length) { 
         var range = rangy.createRange(); 
         $(this).toggleClass('editing').html('<span class="content-editable-wrapper">' + html + '</span>'); 
         var $last = $(this).find('.content-editable-wrapper'); 
         range.setStartAfter($last[0]); 
         range.collapse(false); 
         rangy.getSelection().setSingleRange(range); 
        } 
       } 
      }).on('blur', function() { 
       $(this).toggleClass('editing').find('.content-editable-wrapper').children().last().unwrap(); 
      }); 
     }); 
    </script> 

• NOTA: hacer uso de rangy.js https://code.google.com/p/rangy/

Answer 2

Sí Esto sucede porque usted ha utilizado

elem.trigger('focus'); 

intenta utilizar la clase o para identificar el elemento en el que desea para disparar un evento de disparo.

Answer 3

Tal vez estoy malinterpretando la pregunta, pero no haría lo siguiente (suponiendo que un <div> editable con id "editable")? El temporizador está ahí porque en Chrome, el comportamiento de navegador nativo que selecciona todo el elemento parece desencadenar después del evento focus, anulando así el efecto del código de selección a menos pospuesto hasta después del evento de foco:

var div = document.getElementById("editable"); 

div.onfocus = function() { 
    window.setTimeout(function() { 
     var sel, range; 
     if (window.getSelection && document.createRange) { 
      range = document.createRange(); 
      range.selectNodeContents(div); 
      range.collapse(true); 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.body.createTextRange) { 
      range = document.body.createTextRange(); 
      range.moveToElementText(div); 
      range.collapse(true); 
      range.select(); 
     } 
    }, 1); 
}; 

div.focus(); 

Answer 4

Logré para resolver ese problema después de hurgar un poco en el DOM.

elm.focus(); 
window.getSelection().setPosition(0); 

Probablemente sólo funciona en los navegadores WebKit, pero ya que es la única fuente del problema, he añadido un condicional (usando jQuery)

if(!$.browser.webkit) { 
    elm.focus(); 
} else { 
    elm.focus(); 
    window.getSelection().setPosition(0); 
} 

Hope esto resuelve su problema.

Answer 5

Conjunto posición del puntero en la etiqueta antes o div:

function setCursor(pos) { 
 
    var el = document.getElementById("asd"); 
 
    var range = document.createRange(); 
 
    var sel = window.getSelection(); 
 
    range.setStart(el.childNodes[0], pos); 
 
    range.collapse(true); 
 
    sel.removeAllRanges(); 
 
    sel.addRange(range); 
 
    el.focus(); 
 
} 
 

 
$('button').click(function() { 
 
    setCursor(5); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="asd" contenteditable="true" > 
 
asd 
 
two 
 
</div> 
 
<button>Set caret position</button>

Fuente: https://social.msdn.microsoft.com/Forums/en-US/f91341cb-48b3-424b-9504-f2f569f4860f/getset-caretcursor-position-in-a-contenteditable-div?forum=winappswithhtml5