Yadalay
@Yadalay
Php, Mysql, Html, Css, Js/Jquery/Ajax, Laravel

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

Здравствуйте! Обычно для ввода/изменения текста используются textarea и input. В моём случае я использую див с contentEditable="true". Поэтому здесь не подходят функции для определения позиции курсора в textarea и input. Сама задача: мне нужно узнать позицию курсора в этом диве, после чего получить эту позицию, и вставить туда кусок текста, который будет добавляться при клике на другой див. Для начала хочу узнать, как определить и получить позицию курсора в div'e с contentEditable="true"?
Подскажите, пожалуйста.
  • Вопрос задан
  • 7459 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
В общем-то, сама функция проста, как 2 копейки jsfiddle.net/petroveg/Lnm256qc/1
Проверял — работает.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
midnightcoder-pro
@midnightcoder-pro
Full stack разработчик
Знаю, поздно
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
		}
	}
}
Ответ написан
gaussmake
@gaussmake
недорадиолюбитель с плюсами и друпалом
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы