jQuery, Устанавливающий позицию курсора в contenteditable отделении
Старая версия вопроса ниже после исследования больше, я решил перефразировать вопрос. Проблема как прежде, я должен сфокусировать contenteditable отделение, не выделяя текст, делание прямо фокусируется, выделяет текст в Chrome.
Я понимаю, что люди решили это проблемы в текстовых областях путем сброса позиции курсора в текстовой области. Как я могу сделать это с contenteditable элементом? Все плагины я попробовал только работы текстовыми областями.Спасибо.
Старая Формулировка вопроса:
У меня есть contenteditable элемент, который я хочу сфокусировать, но только поскольку установить курсор впереди элемента, довольно выбирающего все.
elem.trigger('focus');с jQuery выбирает весь текст во всем элементе в хроме. Firefox ведет себя правильно, устанавливая каре впереди текста. Как может я заставлять Chrome вести себя способ, которым я хочу, или фокус, возможно, не, что я ищу.
Спасибо все.
4 ответа
демонстрация : 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>
- ПРИМЕЧАНИЕ. используйте rangy.js https://code.google.com/p/rangy/
Да, это происходит из-за того, что вы использовали
elem.trigger('focus');
попытаться использовать класс или определить элемент, для которого вы хотите запустить событие триггера.
Возможно, я неправильно понимаю вопрос, но не подойдет ли следующее (предполагая редактируемый focus, тем самым перекрывая эффект кода выбора, если не отложить его до события 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();
Мне удалось решить эту проблему после небольшого осмотра DOM.
elm.focus();
window.getSelection().setPosition(0);
Вероятно, это работает только в браузерах WebKit, но, поскольку это единственный источник проблемы, я добавил условное выражение (с использованием jQuery)
if(!$.browser.webkit) {
elm.focus();
} else {
elm.focus();
window.getSelection().setPosition(0);
}
Надеюсь, это решит вашу проблему.