Работа с курсором

Question

[goilo]

Здравствуйте.
У меня два вопроса:
1) Как сделать, чтобы по клику на определенный элемент(не относящийся к полю) курсор не исчезал с поля ввода?
2) Как вставить текст на место курсора?
Предположим есть текст

текст текстишка | текстовой бла бла бла ( " | " - обозначает курсор в данный момент)
Предположим мы кликаем по некой кнопке и должно получиться
текст текстишка был клик!| текстовой бла бла бла

Спасибо

Answer 1

[Сергей Протько]

habrahabr.ru/post/55922

Comments

[goilo]

www.cyberforum.ru/javascript/thread1159053.html

[Сергей Протько]

@goilo, по картинке вроде как и так понятно, там где разбирают 4 рэйджа.

Возмем первый рэйндж, s1 - e2. Если у нас выделение начинается где-то в тексте, а не между DOM элементами, то в качестве элемента для s1 будет выступать TextNode. Смещение для TextNode будет показывать, с какого символа начинается рэйндж. В примере - до начала рэйджа у нас есть два символа. Для второго примера, выделени начинается между dom элементами, так что у нас элементом для начала рэйджа будет body. а отсчет будет проводиться по dom элементам. В примере у нас перед s2 только один dom элемент, так что смещение будет равно еденице.

[Сергей Протько]

@goilo, тип тоды, text это или node, можно узнать по проперте Node.nodeType.

[Сергей Протько]

@Fesor, ноды*

[goilo]

Что такое "рэйндж?"

[Сергей Протько]

по русски - диапозон. То есть это начало и конец выделения. То есть если вы хотите установить курсор где-то в тексте, то нужно создать диапозон, у которого начало и конец будут сопадать (насколько я помню так).

[goilo]

Я так и не могу понять, от чего конкретно и до чего считается offset

[Сергей Протько]

Давайте возьмем ситуацию:

<div class="container"><p>S|ome text</p><p>Another Text</p>

(вертикальной черной я пометил курсор, если что. Как такового выделения текста у нас тут не происходит).

Если вы возьмете диапазон выделения, offset начала и конца этого диапазона будут равны (что логично, ибо у нас ничего не выделено), но координаты курсора в тексте мы узнать можем.

В этом случае у нас курсор стоит где-то в тексте, а значит считать offset мы должны относительно этого TextNode (в DOM все есть ноды, даже просто текст это TextNode, который намного проще обычных элементов). То есть мы берем и считаем символы, и видим что перед курсором есть один символ, значит offset будет равен единице.

Для такой ситуации:

<div class="container"><p>Some text</p>|<p>Another Text</p>

курсор установлен между параграфами. Там нету текста, то есть выделение начинается в контексте нашего блока контейнера. offset в этом случае мы должны считать по элементам, которые находятся перед курсором, а там у нас один параграф. Значит и тут offset будет равен единице.

[Сергей Протько]

Добавлю еще вот такой вариант:

<div class="container"><p>Some <i>text</i></p>|<p>Another Text</p>

тут я добавил элемент i в первый параграф. При расчете offset его не нужно учитывать, так как он является дочерним элементом параграфа. То есть находится на уровень ниже. а нам нужно считать только те элементы, которые находятся на одном уровне с нашим курсором.

[goilo]

Вы говорите о курсоре, но там о нем не слова

[goilo]

как мне получить положение курсора и вставить туда текст?

[Сергей Протько]

@goilo, точно так же как выделенный фрагмент текста. У вас в случае просто с курсором начало и конец фрагмента будут совпадать.