Как узнать положение курсора в div'e с contentEditable="true"?

Question

[Антон]

Здравствуйте! Обычно для ввода/изменения текста используются textarea и input. В моём случае я использую див с contentEditable="true". Поэтому здесь не подходят функции для определения позиции курсора в textarea и input. Сама задача: мне нужно узнать позицию курсора в этом диве, после чего получить эту позицию, и вставить туда кусок текста, который будет добавляться при клике на другой див. Для начала хочу узнать, как определить и получить позицию курсора в div'e с contentEditable="true"?
Подскажите, пожалуйста.

Answer 1

[Евгений Петров]

В общем-то, сама функция проста, как 2 копейки jsfiddle.net/petroveg/Lnm256qc/1
Проверял — работает.

Comments

[Антон]

Я не могу правильно прикрепить к своему html коду. Вставка идёт в начало строки. Если у Вас есть скайп, то не могли бы Вы, пожалуйста, мне помочь прикрепить правильно?

[Антон]

@Petroveg Я сейчас Ваш код подправил. Примерно так у меня сейчас выглядит. Чтобы Вы поняли, как у меня устроена часть кода. При таком решении текст вставляется в самое начало. Не могли бы Вы, пожалуйста, подредактировать текущий код, чтобы корректно работало?

[Евгений Петров]

@Yadalay а в каком месте сохранен подправленный код?

[Антон]

@Petroveg Ой, забыл ссылку написать. Вот - jsfiddle.net/Lnm256qc/18

[Евгений Петров]

@Yadalay элементы формы — особенные (а кнопки ещё особенней:). А, кликнув на простом элементе, вы обнулили объект Selection.

Почему бы вам не использовать для таких операций то, что работает — buttons?

[Антон]

@Petroveg Изменил span на button - работает. Спасибо Вам большое. Выручили очень :-)

[Евгений Петров]

@Yadalay добавлю, что вы могли бы использовать и ссылки — для работы по описанному сценарию без лишних шагов по нахождению позиции и её сохранении, а потом принудительной постановки курсора (а так тоже можно).

Почему можно ссылки? Они могут получать фокус:) А span не может, увы.

[Антон]

@Petroveg Понял, спасибо за информацию :-)

[Антон]

@Petroveg Извините, что опять отвлекаю Вас, но у меня возник ещё один вопрос. Вот при нажатии на кнопку вставляется такой текст: "" (без кавычек). Вопрос: как сделать так, чтобы после вставки курсор был между тегами?

[Евгений Петров]

@Yadalay
Чтобы вставить тэг, нужно писать &amplt; и &gt;, тогда получится, к примеру, <b>жырное</b>.
По теме — есть же описание и Selection, и Range.

Нужно делать collapse(). В какой ноде? Я не большой знаток Range и Selection. Вот достаточно тупой вариант для всех, кроме IE 8 jsfiddle.net/petroveg/Lnm256qc/20
Я создал пустую текстовую ноду и потом свернул в ней выделение. Глкпо, но работает:)

[Антон]

@Petroveg Вставьте, например, в поле вставки такой код: "< aside>< /aside>". Курсор до тегов будет стоять, а не между ними. Или я как-то не так пишу?

[Антон]

@Petroveg Ну, естественно, вместо треугольных скобок html код я писал.

[Евгений Петров]

@Yadalay если вставлять просто элемент, то всё вообще просто jsfiddle.net/petroveg/Lnm256qc/21

[Антон]

@Petroveg Я в collapse() изменил 0 на 4, чтобы курсор был между тегами и . А если мне захочется вставить не тег , а, например, тег , то тут уже не будет подходить...

[Евгений Петров]

@Yadalay ну у вас же ссылки есть, ищите самостоятельно решение — то ли текстовую ноду вставлять, то ли выделить и схлопывать:) Тем более для IE 8 ещё нужно.

[Антон]

@Petroveg Решил эту проблему. При клике добавил такой код:
var number = tag.indexOf('>')+1;
insertHTML(chars(tag), number);
Где number - номер позиции символа ">". "+1" делаю для того, что курсор был после этого символа. В самой функции вместо 0 пишу number.

[Евгений Петров]

@Yadalay вот еще одно извращение по постановке кусрсора jsfiddle.net/petroveg/Lnm256qc/24
Хром игнорирует создание пустой текстовой ноды, сука.

[Антон]

@Petroveg Так я же Вам нормальное решение показал :-)

[Евгений Петров]

@Yadalay в методе collapse второй аргумент 0 или 1. Означает постановку курсора до или после выделенной ноды.

[Антон]

@Petroveg Вы уверены? Это же позиция курсора. Поставлю 5 - будет перед 5 символом. Проверьте сами :-)

[Евгений Петров]

@Yadalay я же ссылку дал. У меня больше оснований верить MDN и неработающему коду при аргументе 2 и выше:)

Answer 2

[Влад Афонин]

Знаю, поздно

function getCursorPosition(parent) {
	let selection = document.getSelection()
	let range = new Range
	range.setStart(parent, 0)
	range.setEnd(selection.anchorNode, selection.anchorOffset)
	return range.toString().length
}

function setCursorPosition(parent, position) {
	let child = parent.firstChild
	while(position > 0) {
		let length = child.textContent.length
		if(position > length) {
			position -= length
			child = child.nextSibling
		}
		else {
			if(child.nodeType == 3) return document.getSelection().collapse(child, position)
			child = child.firstChild
		}
	}
}

Comments

[Александр]

Спасибо. Целый день вчера просидел, твой пример лучший!!
Нужен был на чистом JS.

[Daniel SERG]

мне он тоже в какой то степени помог)