jquery Einstellung der Cursorposition in contenteditable div

Die alte version der Frage ist unten, auf der Suche nach mehr, habe ich beschlossen, formulieren Sie die Frage. Das problem nach wie vor ist, muss ich den Fokus auf eine contenteditable div, ohne den text markieren, tun gerade den Fokus hebt der text in Chrome.

Ich merke, dass die Menschen gelöst, diese Probleme in Texteingabefelder durch das zurücksetzen der position der Einfügemarke in das Textfeld. Wie kann ich das mit contenteditable-element? Alle plugins die ich probiert habe, funktioniert nur mit Texteingabefelder. Danke.

Alte Formulierung der Frage:

Ich habe eine contenteditable-element, das
Ich möchte, sich zu konzentrieren, aber nur insoweit, als
platzieren Sie den cursor an der Vorderseite
das element, sondern die Auswahl
alles.

elem.trigger('focus'); mit jquery
wählt den gesamten text im gesamten
- element in Chrom. Firefox verhält
korrekt, setzen die Einfügemarke an die
vor dem text. Wie kann ich die bekommen
Chrome zu Verhalten, wie ich will, oder ist
Fokus vielleicht nicht das, was ich Suche
für.

Danke an alle.

InformationsquelleAutor der Frage Mark | 2010-05-20

  1. 20

    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>

    InformationsquelleAutor der Antwort Luca Filosofi

  2. 29

    Vielleicht bin ich verlesen die Frage, aber wäre nicht Folgendes tun (unter der Annahme einer bearbeitbaren <div> mit der id "editierbar")? Die timer gibt es da in Chrom, die native browser-Verhalten, wählt das gesamte element auszulösen scheint nach der focus Ereignis, wodurch das überschreiben der Effekt der Auswahl-code, es sei denn, aufgeschoben, bis nach dem Fokus-Ereignis:

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

    InformationsquelleAutor der Antwort Tim Down

  3. 3

    Ja, es geschieht, weil Sie haben 

    elem.trigger('focus');

    versuchen, um die Klasse verwenden, oder identifizieren Sie das element, auf dem Sie das Feuer ein trigger-Ereignis.

    InformationsquelleAutor der Antwort Chirag

  4. 1

    Ich konnte das problem lösen nach ein bisschen stochern im DOM.

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

    Es wohl funktioniert nur auf WebKit-Browsern, aber da es die einzige Quelle für das problem, ich habe eine bedingte (mit jQuery)

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

    Hoffe, das löst dein problem.

    InformationsquelleAutor der Antwort DfKimera

Schreibe einen Kommentar