wake-up-neo.com

jquery Festlegen der Cursorposition in contenteditable div

Die alte Version der Frage ist unten, nachdem ich mehr recherchiert hatte, entschied ich mich, die Frage umzuformulieren. Das Problem wie zuvor ist, dass ich ein inhaltsfähiges Div ohne Fokus hervorheben muss, indem Sie den Text in Chrome hervorheben.

Ich erkenne, dass die Leute diese Probleme in Textbereichen gelöst haben, indem sie die Caret-Position im Textbereich zurücksetzen. Wie mache ich das mit einem inhaltbaren Element? Alle Plugins, die ich ausprobiert habe, funktionieren nur mit Textbereichen. Vielen Dank.

Alte Formulierung der Frage:

Ich habe ein inhaltbares Element, das Ich möchte mich konzentrieren, aber nur soweit um den Cursor vor zu positionieren. das Element, stattdessen .__ auszuwählen. alles.

elem.trigger('focus'); mit jquery wählt den gesamten Text im gesamten .__ aus. Element in Chrom. Firefox verhält sich richtig, setzen Sie den Einfügemarke auf. vor dem Text. Wie bekomme ich Chrome, um sich so zu verhalten, wie ich es will oder ist fokus vielleicht nicht auf was ich schaue zum.

Danke euch allen.

35
Mark

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>
20
Luca Filosofi

Vielleicht verstehe ich die Frage falsch, würde aber Folgendes tun (vorausgesetzt, dass ein <div> mit der ID "editierbar" ist)? Der Timer ist vorhanden, da in Chrome das native Browser-Verhalten, das das gesamte Element auswählt, nach dem focus-Ereignis ausgelöst wird. Dadurch wird die Auswirkung des Auswahlcodes außer Kraft gesetzt, es sei denn, er wird erst nach dem Fokus-Ereignis verschoben:

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();
29
Tim Down

Ja, das passiert, weil du es benutzt hast 

elem.trigger('focus'); 

versuchen Sie, class zu verwenden oder das Element zu identifizieren, für das Sie ein Triggerereignis auslösen möchten.

3
Chirag

Ich habe es geschafft, dieses Problem zu lösen, nachdem ich im DOM herumgestochert hatte.

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

Es funktioniert wahrscheinlich nur auf WebKit-Browsern, aber da es die einzige Ursache des Problems ist, habe ich eine Bedingung hinzugefügt (mit jQuery).

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

Hoffe, das löst dein Problem.

1
DfKimera

Zeigerposition im pre- oder div-Tag einstellen:

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>

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

0
K. Kuksin