Intereting Posts
Печать html игнорирует стили CSS Синтаксис Razor – как условно обернуть некоторый внутренний HTML Позиционирование изображения по горизонтали и высота 100% Эффект css на daterangepicker не работает Поведение Jsoup, когда отсутствует какой-либо конечный тег HTML Чтобы узнать, имеет ли div панель прокрутки преобразование HTML в многостолбцовый PDF-файл Как заставить IE10 отображать страницу в режиме документа IE9 Как исправить фликкер при использовании трансляций и переходов Webkit Onchange в динамической таблице только обновляет входное текстовое поле в первой строке Проблема со встроенными внутренними страницами jQuery PHP Не получать текст из текстового поля Как хранить части форм-данных, когда они находятся на отдельных страницах? Использовать легенду Fieldset с бутстрапом Как передать значения с одной HTML-страницы на другую с помощью java-скрипта?

Установить положение курсора после вложенного contentEditable

У меня есть эта разметка

Some other editable content
This is the label This is where the caret is

В настоящее время каретка находится в .field .

Мне нужно переместить его обратно после .field в родительском contentEditable .

пример

Как это можно сделать с помощью javascript (с использованием jQuery, если необходимо)?

Он будет пытаться вызвать его при событии keydown, когда каретка находится в диапазоне .value, как показано.

Обновление предыдущего ответа. http://jsfiddle.net/GLzKy/4/

 placeCaretAtEnd($(this).parent().nextAll('.field').children('value')); 

ОБНОВИТЬ

Обновленный ответ с правильным ответом в комментариях

Для перемещения непосредственно после текущего поля вы можете использовать range.setStartAfter и range.setEndAfter: http://jsfiddle.net/GLzKy/5

Я предполагаю, что вы хотите перейти к следующему разделу. Чтобы было ясно, я добавил текст «Здесь!». в демонстрации, чтобы показать вам, что она подходит к концу.

В приведенной ниже демонстрации нажмите клавишу Enter из .field .value чтобы перейти в конец.

ДЕМО: http://jsfiddle.net/GLzKy/1/

Ниже приведена функция из https://stackoverflow.com/a/4238971/297641, которая фактически выполняет всю работу.

 $('.field .value').keydown(function (e) { if (e.which == 13) { //Enter Key e.preventDefault(); placeCaretAtEnd($(this).closest('.parent')[0]); } }); /** This below function is from https://stackoverflow.com/a/4238971/297641 All credits goes to the original author. */ function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } 

Протестировано в FF, IE8 и Chrome

Ссылка: https://stackoverflow.com/a/4238971/297641