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

Question

[Dark19]

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

Answer 1

[Stalker_RED]

Как-то так: https://jsfiddle.net/Stalk/kzmkq3y7/

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

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

Comments

[Dark19]

круто, но есть один косяк: когда вставил смайл и пишешь текст после него, то текст пишется уже в спане, а не после. Пробовал лечить это так: вставлять после спана еще  , помогает, но тогда появляется другой баг, курсор ставится перед  . Хз, сижу думаю как пофиксать... Может есть какие-то мысли по этому поводу?

[Stalker_RED]

Dark19, да, можно добавить пробел после спана, а чтобы курсор в правильном месте был не забывайте делать collapse
https://jsfiddle.net/Stalk/kzmkq3y7/1/

Если пробел мешает, можно использовать пробел с нулевой шириной (​)

Но если юзер нажмет backspace, например, то пробел удалится, и курсор снова попадет в спан, это "фича" contenteditable.
https://jsfiddle.net/Stalk/kzmkq3y7/2/

[Dark19]

Stalker_RED, Супер, правда я немного проверку на contenteditable поменял https://jsfiddle.net/dark19/mf05r7y3/2/, потому что когда не было тегов в поле ввода, то смайлы не добавляло, так как родительский уже был не contenteditable. Но заметил еще одну багу в edge: когда вставляешь смайл, курсор ставится перед ним, хз почему. Есть какие-то мысли по этому?

[Stalker_RED]

Dark19, попробуйте явно указать collapse(false), возможно майкрософт в очередной раз забил на спецификацию.

[Dark19]

Stalker_RED, у меня в аппке так и стоит, так как ангуляр не пропускает без параметра

[Stalker_RED]

Dark19, у меня сейчас нет edge под рукой. Можно попробовать принудительно ставить каретку в нужную позицию.

range.setStart(smileSpan, 1);
range.setEnd(smileSpan, 1);

если вы ставите пробел, то вместо спана нужно соответствующую тектовую ноду указать.