@Dark19

Как правильно взять позицию курсора в contanteditable?

Привет всем! Делаю чат, вместо textarea использую div contanteditable ибо textarea не подходит, нужно вставлять смайл обернутый в спан в место где находится курсор в поле ввода по клику на смайл в блоке под полем ввода. Так вот немного нарыл, немного дописал скрипт под это дело, но не получается в силу своей неопытности пофиксить баг с повторной вставкой смайла. Например: ставлю курсор посреди текста в поле ввода и нажимаю на смайл (все ок, пока нету тегов в поле ввода), далее ставлю курсор в другое место и опять на смайл, и тогда смайл уже вставляется не в то место где был курсор (уже есть теги от предыдущего смайла или перенос строки). А проблема в том, что в функции insertIntoFormula берется innerHTML, а в функции getCaretCharacterOffsetWithin берется просто текст без тегов (и соответственно позиция курсора сдвигается) и я не могу понять как работать с Range чтобы бралось innerHTML и позиция курсора вычислялась правильно с учетом тегов поля ввода. Кто шарит, подскажите... Вот кодпен сделал https://codepen.io/dark19/pen/wpwOxr
  • Вопрос задан
  • 249 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
Как-то так: https://jsfiddle.net/Stalk/kzmkq3y7/

Сейчас, если курсор не находится внутри contenteditable вставка не происходит. Можно вместо return false сделать принудительную установку курсора в конец поля, например.

Для старых баузеров (типа IE<9), используйте полифиллы, или тупой костыль вроде
field.innerHTML += '☺'
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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