Jquery Установка позиции курсора в контентном значении div

Старая версия вопроса ниже, после изучения большего, я решил перефразировать вопрос. Проблема по-прежнему заключается в том, что мне нужно сфокусировать контент-доступный div, не выделяя текст, делая прямое фокус, выделяя текст в Chrome.

Я понимаю, что люди решили эти проблемы в текстовых средах, сбросив положение каретки в текстовое поле. Как я могу сделать это с помощью элемента contenteditable? Все плагины, которые я пробовал, работают только с текстовыми полями. Спасибо.

Старый Фраза вопроса:

У меня есть контент-элемент, который Я хочу сосредоточиться, но только постольку, поскольку поместить курсор в начало элемент, а выбор все.

elem.trigger('focus'); с jquery выбирает весь текст в целом элемент в хром. Firefox ведет себя правильно, установив каретку на перед текстом. Как я могу получить Chrome должен вести себя так, как я хочу, или фокус, возможно, не то, что я ищу для.

Спасибо всем.

Ответ 1

demo: 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>

ПРИМЕЧАНИЕ: используйте rangy.js https://code.google.com/p/rangy/

Ответ 2

Возможно, я неверно истолковал вопрос, но не сделал бы следующее (предполагая редактируемый <div> с id "editable" )? Таймер существует, потому что в Chrome поведение браузера, которое выбирает весь элемент, похоже, запускается после события 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();

Ответ 3

Да, это происходит потому, что вы использовали

elem.trigger('focus');

попробуйте использовать класс или идентифицировать элемент, по которому вы хотите запустить событие триггера.

Ответ 4

Мне удалось решить эту проблему после того, как вы купили DOM.

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

Вероятно, он работает только в браузерах WebKit, но поскольку это единственный источник проблемы, я добавил условный (с использованием jQuery)

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

Надеюсь, что это решает вашу проблему.