jquery Establecer la posición del cursor en div contenteditable

focus caret

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 estos problemas 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.

Viejo fraseo de la pregunta:

Tengo un elemento contento que quiero enfocar, pero solo para colocar el cursor al frente del elemento, en lugar de seleccionar todo.

elem.trigger(''focus''); con jquery selecciona todo el texto en todo el elemento en chrome. Firefox se comporta correctamente y establece el símbolo de intercalación al principio del texto. ¿Cómo puedo hacer que Chrome se comporte de la manera que quiero, o quizás el foco no es lo que estoy buscando?

Gracias a todos.

Answer 1

demo : http://so.lucafilosofi.com/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: haga uso de rangy.js https://code.google.com/p/rangy/

Answer 2

Establecer la posición del puntero en la etiqueta pre 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

Answer 3

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

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

Probablemente solo funcione en los navegadores WebKit, pero como es la única fuente del problema, agregué un condicional (usando jQuery)

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

Espero que esto resuelva tu problema.

Answer 4

Sí, sucede porque has usado

elem.trigger(''focus''); 

intente usar la clase o para identificar el elemento sobre el que desea disparar un evento desencadenante.

Answer 5

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 del navegador nativo que selecciona el elemento completo parece activarse después del evento de focus , anulando así el efecto del código de selección a menos que se posponga hasta después del evento de enfoque:

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();