Вопрос: Как вставить текст под курсором.

Столкнулся сегодня с этой задачей, решил ответить на него один раз с рабочим кодом. Надеюсь больше этот вопрос не всплывёт 

В разных браузерах по разному можно узнать где находится каретка в текстовом поле. Точнее только в Мозилле на данный момент есть возможность узнать положение каретки опрашивая поля:

• selectionStart -  начало селекции, в символах
• selectionEnd - конец селекции, в символах

Таким образом можно разбить содержимое на подстроки: до селекции, селекция, после селекции.

В ИЕ есть полезный обьект document.selection который может достать нам обьект DOM'овский обьект(ну почти DOM'овский  ) TextRange. Изменяя этот обьект мы изменяем содержимое селекции.
Селекция здесь в самом широком смысле! То есть мы можем таким же образом работать над всем содержимым страницы.

В Опере код работать не будет, по старинке текст добавляется в конец.

Следующая сложность это не потерять селекцию(положение курсора) при клике на внешний элемент. Будем отлавливать события потери фокуса, клика и т.д., записывать "позицию курсора" и использовать её когда нужно.
В моём коде есть потенциальная ошибка: если отселектировать текст, затем кликнуть где нибудь по странице, а затем по кнопке вставляющей новый текст, то он будет вставлен в записанную позицию, что не совсем верно - селекция должна исчезнуть если кликаем не по кнопке. Решается отловом событий на body и сбросом записанной селекции, но это по вкусу 

Код с коментариями:
 

аааааааа
Sardar ты монстр! господи, я и не представлял, что эти чёртовы разные браузеры могут делать из одной простой функции в ИЕ такую туеву хучу всякого кода!

Это сообщение отредактировал(а) Aliance - 24.3.2005, 01:15

Кода на самом деле не много(подсветка убила форматирование), просто возможности чуть шире
Забываем о текстовом поле, создаем обьект и работаем с созданным обьектом.
Смотри пример, запусти.

Это сообщение отредактировал(а) Aliance - 24.3.2005, 01:15

ALEXANDRO
где Сардар подвел итог я не нашел зато сделал что хотел :-)

набо было то всего:

Код

<script> // определяем позицию курсора var xxx = parent.frames['xxx'].document.forms["xxx"].elements['xxx']; selStart=xxx.selectionStart; selEnd=xxx.selectionEnd; scrTop=xxx.scrollTop; // дальше некоторый код и затем // ставим курсор после кода смайлика     xxx.selectionStart=selStart +code.length;     xxx.selectionEnd= xxx.selectionStart;     xxx.scrollTop= scrTop;     parent.frames['xxx'].document.forms['xxx'].elements['xxx'].focus(); //ставим курсор </script>

вот что я хотел

PHP-DIRECTOR если не понял, значит удалять ничего не буду...

Поделим мир на 3 части:

• те кто пользуется Opera - безнадёжные парни, им никогда не увидеть сей радости
• те кто пользуется Мозиллоподобными - используется немного примитивный подход, мы задаём для текстового поля начало и конец селекции. Курсор это тоже селекция, где начало и конец в одной точке.
• те кто пользуется ИЕ - используется немного навороченный способ, управление через обьект selection.

Как видим реально узнать позицию курсора можно только в Мозилле. В IE можно отрасировать текст перед селекцией и узнать позицию, но нам это не нужно, мы просто вставляем в селекцию текст, который и встанет на место курсора.

Также нужно запоминать позицию курсора при потере фокуса, ведь если ты кликнешь на кнопку, то фокус с текстового поля уйдёт

Разбирай мой код, там сразу станет ясно
Как его использовать:

Код

//пусть у нас есть некоторое текстовое поле <textarea id="my_text_pole"></textarea> ..... var txtpole=document.getElementyById("my_text_pole"); //воспользуемся моимкодом, что бу просто работать с этим полем var hTextarea = new TextAreaSelectionHelper(txtpole); //допустим этой фунцкией мы будем вставлять смайлики(что угодно) под курсором function vstav_smajl_pod_kursorom(smile) { hTextarea.setSelectedText(smile); } //а вот этой фунцкией мы будем оборачивать отселектированный текст в заданные теги function oberni_v_teg_pod_kursorom(tagOpen, tagClose) {  hTextarea.setSelectedText(tagOpen, tagClose); } //как видишь всё ясно :) <span onclick="vstav_smajl_pod_kursorom(':)')">:)</span><br> <span onclick="oberni_v_teg_pod_kursorom('[sometag]', '[/sometag]')">Обернуть в [sometag]</span>

Sardar
Огромное спасибо за данный код, это просто бестцеллер :-)
6 с половиной баллов

Aliance на логе по аське можно создать небольшой мануал, а то вижу народу не ясно
Скинь ссылки на примеры что наверстали, будет интересно. А вообще надо смотреть исходник в новом дизайне, там многие фичи включая эту используются. Ждём когда его введут

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

Новая Опера включена?

Опера вроде бы обьект selection поддерживает, следовательно должно работать, если они от поведения ИЕ не отклонялись. В любом случае надо потестить.

Пример тут: http://files.vingrad.ru/Aliance/bbcode.html

Блин! Эта Опера опять выделывается...

Код

http://files.vingrad.ru/Aliance/bbcode.html Event thread: click Error: name: TypeError message: Statement on line 107: object required Backtrace:   Line 107 of inline#1 script in http://files.vingrad.ru/Aliance/bbcode.html     if (this.iesel && this.iesel.parentElement() == this.target)     else       Line 209 of inline#1 script in http://files.vingrad.ru/Aliance/bbcode.html     post.setSelectedText(tag1, tag2);   Line 1 of  script      wrapTags("[b]", "[/b]");   At unknown location     [statement source code not available]

У меня к сож времени нету разбираться

Очень странно, как будто TextRange.parentElement не поддерживается... Поставлю у себя этого зверя, пофиксю, в новом скине этот код применяется... ведь обещали нормальную поддержку... На opera.com последняай документация на версию 7, о 8 только реклама...

Я перенял твой код и у меня с ним Опера работает...
http://www.iwi-iuk.org:8081/tex/index.php

А функция «Быстрой цитаты» работает по этому же коду/принципу?