'contenteditable' JavaScript — Получение/Установка Позиции курсора
Я прочитал несколько сообщений при расположении каре, но ни один, кажется, не отвечает на мой конкретный вопрос.
- У меня есть 2 отделения (div1 и div2)
- div1 = недоступное для редактирования отделение
- div2 = contenteditable отделение
- оба отделения содержат точно то же самое содержание
- когда пользователь нажимает на div1, он скрыт, и div2 появляется в точном месте, и пользователь может отредактировать
Проблема: Я хочу, чтобы каре появилось в точном месте на div2 как div1
Так, мне нужен некоторый способ СЧИТАТЬ местоположение, где пользователь нажимает на div1, и затем когда div2 появляется, устанавливают курсор в то же самое местоположение, таким образом, getCaretLocation (in_div_id) и setCaretLocation (in_div_id) набор функций.
Какой-либо способ сделать это?
Спасибо -
2 ответа
Краткий ответ : Вы не можете
Длинный ответ : Проблема, с которой вы столкнетесь, заключается в том, что вы сможете получить координаты (x, y) для события щелчка на div1, но любая реализация позиции курсора при этом требует, чтобы вы знали положение курсора в содержимом (которое представляет собой количество символов, предшествующих каретке).
Чтобы преобразовать координаты (x, y) в позицию символа, вам действительно нужно знать, сколько символов было до (т. Е. Осталось в текущей строке и выше, если текст ltr).
Если вы используете шрифт фиксированной ширины, вы можете упростить задачу: сопоставьте координату (x, y) с координатой (линия, столбец) на сетке символов.
Однако вы по-прежнему сталкиваетесь с проблемой незнания способа переноса текста.Например:
------------------
|Lorem ipsum |
|dolor sit amet |
|consectetur |
|adipiscing elit |
------------------
Если пользователь нажимает на d в dolor , вы знаете, что этот символ стоит 1-м во 2-й строке, но, не зная алгоритм переноса, нет Кстати, вы знаете, что это 13-й персонаж в «Lorem ipsum dolor sit…». И нет никакой гарантии, что такой алгоритм упаковки идентичен для разных браузеров и платформ.
Теперь меня интересует, зачем вам вообще использовать два разных синхронизированных div ? Не было бы проще использовать только один div и сделать его содержимое доступным для редактирования, когда пользователь щелкает мышью (или наводит курсор)?
Похоже, вы пытаетесь выполнить встроенное редактирование ... Вы смотрели jeditable плагин?