Я нахожу массу хороших кроссбраузерных ответов о том, как УСТАНОВИТЬ курсор или позицию индекса курсора в contentEditable
элементе, но ни одного о том, как ПОЛУЧИТЬ или найти его индекс ...
Я хочу знать индекс каретки в этом div, on keyup
.
Итак, когда пользователь набирает текст, я могу в любой момент узнать индекс его курсора внутри contentEditable
элемента.
РЕДАКТИРОВАТЬ: я ищу ИНДЕКС в содержимом div (тексте), а не в координатах курсора.
<div id="contentBox" contentEditable="true"></div>
$('#contentbox').keyup(function() {
// ... ?
});
<a>
элемента внутри<div>
, какое смещение вы хотите тогда? Смещение в тексте внутри<a>
?Ответы:
Следующий код предполагает:
<div>
и никаких других узловwhite-space
свойство CSS, установленное наpre
Если вам нужен более общий подход, который будет работать с содержимым с вложенными элементами, попробуйте этот ответ:
https://stackoverflow.com/a/4812022/96100
Код:
источник
<a>
элемента внутри<div>
, какое смещение тогда вам нужно? Смещение в тексте внутри<a>
?keyup
скорее всего, это неправильное событие, но это то, что было использовано в исходном вопросе.getCaretPosition()
сам по себе хорош в пределах своих ограничений.<br>
или<div>
, что нарушает первое предположение, упомянутое в ответе. Если вам нужно более общее решение, вы можете попробовать stackoverflow.com/a/4812022/96100Несколько морщин, которые я не вижу в других ответах:
Вот способ получить начальную и конечную позиции как смещения к значению textContent элемента:
источник
источник
Попробуй это:
Caret.js Получить позицию и смещение курсора из текстового поля
https://github.com/ichord/Caret.js
демо: http://ichord.github.com/Caret.js
источник
contenteditable
li
при нажатии кнопки для переименованияli
содержимого.Типа поздно на вечеринку, но на случай, если кто-то еще борется. Ни один из поисков в Google, которые я нашел за последние два дня, не дал ничего, что работало бы, но я нашел краткое и элегантное решение, которое всегда будет работать независимо от того, сколько у вас вложенных тегов:
Он выбирает полностью до начала абзаца, затем подсчитывает длину строки, чтобы получить текущую позицию, а затем отменяет выделение, чтобы вернуть курсор в текущую позицию. Если вы хотите сделать это для всего документа (более одного абзаца), измените
paragraphboundary
кdocumentboundary
или какой - либо зернистости для вашего случая. Ознакомьтесь с API для получения более подробной информации . Ура! :)источник
<div contenteditable> some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text </div>
раз, когда я помещаю курсор передi
тегом или любым дочерним элементом html внутриdiv
, позиция курсора начинается с 0. Есть ли способ избежать этого счетчика перезапуска?источник
У меня работает:
Вызывающая линия зависит от типа события, для ключевого события используйте это:
для события мыши используйте это:
в этих двух случаях я забочусь о линиях разрыва, добавив целевой индекс
источник
Примечание: сам объект диапазона может быть сохранен в переменной и может быть повторно выбран в любое время, если не изменится содержимое contenteditable div.
Ссылка для IE 8 и ниже: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx
Ссылка на стандартные (все остальные) браузеры: https://developer.mozilla.org/en/DOM/range (это документы Mozilla, но код также работает в Chrome, Safari, Opera и IE9)
источник
Range
Объект , возвращаемый в большинстве браузеров иTextRange
объект , возвращаемый IE очень разные вещи, так что я не уверен , что этот ответ решает многое.Поскольку это заняло у меня целую вечность, чтобы понять, как использовать новый API window.getSelection, я собираюсь поделиться им для потомков. Обратите внимание, что MDN предлагает более широкую поддержку window.getSelection, однако ваш опыт может отличаться.
Вот jsfiddle, который запускается при нажатии клавиши . Однако обратите внимание, что быстрое нажатие клавиш со стрелками, а также быстрое удаление, похоже, являются пропущенными событиями.
источник
Прямой способ, который выполняет итерацию по всем дочерним элементам contenteditable div, пока не достигнет endContainer. Затем я добавляю смещение конца контейнера, и у нас есть индекс символа. Должен работать с любым количеством вложений. использует рекурсию.
Примечание: требуется заливка поли, например, для поддержки
Element.closest('div[contenteditable]')
https://codepen.io/alockwood05/pen/vMpdmZ
источник