jQuery ustawianie pozycji kursora w contenteditable div

Question

jQuery ustawianie pozycji kursora w contenteditable div

Stara wersja pytania znajduje się poniżej, po zbadaniu więcej, postanowiłem przeformułować pytanie. Problem jak wcześniej jest, muszę skupić contenteditable div bez podświetlania tekstu, robi prosto w górę ostrość podświetla tekst w Chrome.

Zdaję sobie sprawę, że ludzie rozwiązali ten problem w textareas, resetując pozycję karetki w textarea. Jak to zrobić z elementem contenteditable? Wszystkie wtyczki próbowałem działa tylko z textareas. Dzięki.

Stare sformułowanie pytania:

Mam pewien element, który Chcę się skupić, ale tylko w takim zakresie, w jakim aby umieścić kursor z przodu element, raczej wybierając wszystko.

elem.trigger('focus'); z jquery zaznacza cały tekst w całości element w chromie. Firefox zachowuje się prawidłowo, ustawiając karetkę na z przodu tekstu. Jak Mogę dostać Chrome, aby zachowywać się tak, jak chcę, lub jest focus może nie to co szukam za.

Dzięki wszystkim.

35

jquery focus cursor-position contenteditable caret

Author: Luca Filosofi, 2010-05-20

Source

5 answers

Może źle odczytałem pytanie, ale czy poniższe nie zrobiłoby tego (zakładając edytowalne {[1] } z id "edytowalny")? Timer jest tam, ponieważ w Chrome natywne zachowanie przeglądarki, które wybiera cały element, wydaje się wyzwalać po zdarzeniu focus, tym samym nadpisując efekt kodu zaznaczenia, chyba że zostanie przełożone na zdarzenie focus:

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

Author: Tim Down,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-01 23:59:36

Tak to się dzieje, ponieważ użyłeś

elem.trigger('focus');

Spróbuj użyć klasy lub zidentyfikować element, na którym chcesz wystrzelić zdarzenie wyzwalające.

3

Author: Chirag,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-20 05:09:47

Udało mi się rozwiązać ten problem po trochę grzebanie wokół DOM.

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

Prawdopodobnie działa tylko na przeglądarkach WebKit, ale ponieważ jest to jedyne źródło problemu, dodałem warunkowe (używając jQuery)

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

Mam nadzieję, że to rozwiąże twój problem.

1

Author: DfKimera,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-09 17:26:22

Ustaw pozycję wskaźnika w znaczniku pre lub 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>

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

0

Author: K. Kuksin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-29 04:13:24

score 20 · Accepted Answer

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>

Uwaga: użyj rangy.js https://code.google.com/p/rangy/