Поведение курсора в div contenteditable=true

@Hawkmoth · Регистрация: 18.05.2010

Студворк — интернет-сервис помощи студентам

Добрый день, друзья! Есть div c contenteditable=true - окошко ввода сообщений в чате. Есть смайлы, которые успешно в это окошко вставляются как <img>. По умолчанию, если на уже вставленный смайл в окошке кликнуть, он выделится и с ним можно будет производить какие-то действия: растягивать, перемещать и т. д. Вопрос: как при клике на смайл запретить его редактировать и просто переместить курсор в то место, которое ближе к клику (перед или сразу после этого смайла?). Желаемый результат легко увидеть на примере окна ввода сообщений в диалогах вконтакте.

Пока есть только заготовка для функции, обрабатывающей клик по смайлу:

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
    $("div[contenteditable=true]").on("mousedown", "img", function(){
        //alert("Клик по смайлу!");
        return false;
    });
});

Спасибо всем за помощь!

Добавлено через 40 минут
Вот так курсор ставится всегда после смайла:

JavaScript
1
2
3
4
5
6
7
8
9
10
$("div[contenteditable=true]").on("mousedown", "img", function(){
        var range = document.createRange();
        range.setStartAfter(this);
        range.setEndAfter(this);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        $("#chat_message").focus();
        return false;
    });

Это решает часть задачи, но хотелось бы, чтобы курсор "соскальзывал" влево или вправо в зависимости от того, к какому краю смайла ближе был произведен клик.

Спасибо всем откликнувшимся заранее!

Добавлено через 14 часов 33 минуты
Ок, временно оставил так, как есть, это вполне приемлемо.
Теперь прошу Вашей помощи в другом вопросе: как сделать так, чтобы при клике левой или правой кнопкой мыши на вставленном смайле он не выделялся и не давал себя растягивать, а вел бы себя как "пустое место" (пример - опять же, поведение смайлов в вк).

JavaScript
1
<img contenteditable="false">

не подходит, так как в этом случае собьется поведение курсора и смайл нельзя будет удалить бэкспейсом.

Спасибо заранее!

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .