Передайте событие click со смещением в contentEditable

Question

У меня есть div (.top), который находится поверх другого div (.text). Если щелкнуть .top, он должен скрыться, а .text должен стать редактируемым. Я также даю .text непосредственно фокус.

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

Вот демоверсия .

Есть ли способ передать событие click из .top в .text с правильным смещением (так как это кажется необходимым для установки правильной позиции курсора)?

Answer 1

Событие щелчка запускается DIV. Он не знает, где произошел щелчок. Чтобы сделать это, вы должны также отслеживать события мыши. Это не сложно само по себе.

С помощью мыши x, y вы можете вычислить DIV x, y и преобразовать координаты. Это тоже не сложно.

Проблема заключается в том, что нет прямой связи между символами в DIV и щелчком. Чтобы сделать это, вам, в основном, нужно вставить элемент в DIV и изменить его положение в тексте, пока вы не совпадете с приблизительным положением мыши. Вероятно, это не будет точное совпадение, так как вы не нажимаете в начале или в конце символа точно.

Затем вы должны выяснить, где это и переместить курсор в коде.

Answer 2

У меня есть две идеи на этот счет. Во-первых, избегайте этой проблемы, переключая классы, чтобы изменить стиль редактируемой версии, вместо того, чтобы иметь два div, один из которых вы отключаете.

Другая идея состоит в том, чтобы прикреплять обработчик щелчков в «фазе захвата», а не в более традиционной пузырьковой фазе, чтобы событие продолжало распространяться, и окно редактирования получало щелчок. Сейчас я не уверен, как это сделать в jQuery.