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

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

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

• 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

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

С ие и мозиллой он всегда работал. проблема только с Оперой

Цитата(Aliance @ 1.4.2005, 17:42)

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

Нет, когда сделали сперва, то всем ужастно не понравилось, что цитата в курсор вставлялась. Было очень неудобно.

Добавлено @ 18:57
http://forum.vingrad.ru/index.php?showtopic=32152&hl=
Где то здесь обсуждали

Цитата(sergej @ 1.4.2005, 18:52)

когда сделали сперва

А как тогда сейчас? Впринципе, различие там только в том, чтобы только отселектрированный текст вставлять...

Value+=цитата

sergej.z, а я цитату в новом дизайне под курсором вставляю, нужно исправить...

Цитата(sergej @ 1.4.2005, 19:11)

Value+=цитата

А чего так? =/

Цитата(Aliance @ 1.4.2005, 20:07)

А чего так? =/

Вот, нашёл
http://forum.vingrad.ru/index.php?showtopi...58&unread=1&hl=

Цитата(Sardar @ 1.4.2005, 19:41)

sergej.z, а я цитату в новом дизайне под курсором вставляю, нужно исправить...

Как видишь...

Что-то я не смог разобраться с установкой примера, предложенного Sardar'ом, под IE 6. В JavaScript я разбираюсь плохо, поэтому не смог проанализировать код. Как мне кажется, не записывается позиция курсора - вставка у меня осуществляется в конец текста. Возможно я что-то не так сделал, тогда, пожалуйста, подскажите - что?

Файл HTML:

Код

<script src="insert.js"></script> <textarea id="textarea1" cols=80 rows=20>hhj</textarea> <span onClick="test()">Test</span>

Файл "insert.js":

Код

/** * Обьект через который мы и будем работать с текстовыми полями. * Содержит все необходимые поля, легко расширяем по вкусу =) * @argument  obj  HTMLElment  - текстовое поле с кторым предстоит работать *  * Author: Sardar <[email protected]> */ function TextAreaSelectionHelper(obj) {  this.target=obj;  this.target.carretHandler=this; //ссылка самого на себя для текстового поля  /**  * Помним что события могут быть уже опредлеенны, тогда нужно использовать  * очереди. Конечно реализация для ИЕ и Мозиллы в корне различаются, почитать  * и достать готовый код можно здесь: http://forum.vingrad.ru/index.php?showtopic=32350  */  this.target.onchange=_textareaSaver;  this.target.onclick=_textareaSaver;  this.target.onkeyup=_textareaSaver;  this.target.onfocus=_textareaSaver;  if(!document.selection) this.target.onSelect=_textareaSaver; //для Мозиллы    this.start=-1;  this.end=-1;  this.scroll=-1;  this.iesel=null; //для ИЕ } /** * Достать отселектированный текст */ TextAreaSelectionHelper.prototype.getSelectedText=function() {   return this.iesel? this.iesel.text: (this.start>=0&&this.end>this.start)? this.target.value.substring(this.start,this.end): ""; } /** * Вставить код под курсором. Если текст не отселектирован(не фокуса) и  * позиция не взята, то вставить в конец текстового поля. * * @argument text String - заменить селекцию на этот текст * @argument secondtag String - если задан, то селекция не заменяется, а обрамляется этими тегами */ TextAreaSelectionHelper.prototype.setSelectedText=function(text, secondtag) {  if(this.iesel) { if(typeof(secondtag)=="string") {   var l=this.iesel.text.length;      this.iesel.text=text+this.iesel.text+secondtag;   this.iesel.moveEnd("character", -secondtag.length);    this.iesel.moveStart("character", -l);    } else {   this.iesel.text=text; }    this.iesel.select();  } else if(this.start>=0&&this.end>=this.start) {     var left=this.target.value.substring(0,this.start);     var right=this.target.value.substr(this.end);  var scont=this.target.value.substring(this.start, this.end);  if(typeof(secondtag)=="string") {    this.target.value=left+text+scont+secondtag+right;    this.end=this.target.selectionEnd=this.start+text.length+scont.length;    this.start=this.target.selectionStart=this.start+text.length;      } else {       this.target.value=left+text+right;    this.end=this.target.selectionEnd=this.start+text.length;    this.start=this.target.selectionStart=this.start+text.length;  }  this.target.scrollTop=this.scroll;  this.target.focus();  } else {    this.target.value+=text + ((typeof(secondtag)=="string")? secondtag: ""); if(this.scroll>=0) this.target.scrollTop=this.scroll;  } } /** * Это функции для веса =) */ TextAreaSelectionHelper.prototype.getText=function() {  return this.target.value; } TextAreaSelectionHelper.prototype.setText=function(text) {  this.target.value=text; } /** * Приватная фукнкция, записывающая позицию курсора */ function _textareaSaver() {  if(document.selection) {    this.carretHandler.iesel = document.selection.createRange().duplicate();  } else if(typeof(this.selectionStart)!="undefined") {    this.carretHandler.start=this.selectionStart; this.carretHandler.end=this.selectionEnd; this.carretHandler.scroll=this.scrollTop;  } else {this.carretHandler.start=this.carretHandler.end=-1;} } //Пример использования function test() { var text=new TextAreaSelectionHelper(document.getElementById("textarea1")); text.setSelectedText("[test]","[/test]"); //text.setSelectedText("[test]"); }

Код

<script src="insert.js"></script> ... <textarea id="textarea1" cols=80 rows=20 name="AAAA">hhj</textarea> <script type="text/javascript">var post=new TextAreaSelectionHelper(document.getElementById("AAAA"));</script>

эм, я очень слаб в JavaScript, это только для IE? Если да, то имхо есть вариант легче.

Код

<script> function zzz()  {   obj_ta=document.form.textarea;   obj_ta.focus();   var sel=document.selection;   var rng=sel.createRange();   rng.colapse;   var podst="<b>"+rng.text+"</b>";   rng.text=podst;  } </script> <form name=form> <input type=button value=" B " onClick=zzz()><br><br> <textarea name=textarea cols=50 rows=10></textarea> </form>

А готового кода для Мазиллы нет? Мне очень нужно, самому разобраться не получается. Помогите пожалуйста!

-NIK-, Sardar "только для ИЕ" не пишет

я вот чего не понял. мы в мозилле, когда хотим заменить выделение, мы делим на три части, потом заменяем среднюю часть, опять соединяем в одну часть и полностью заменяем на неё содержимое инпута?

Именно так. В версии 1.5 возможно кое что и изменилось. Например document.selection теперь обьектом стал. Но это надо ещё посотреть что, да как. Пока некогда..

ок, спасибо.
решений для других браузеров, кроме IE и Firefox так и нету, да?

решение Сардара работает н всём, кроме оперы <8.0 (для старых опер решения нет. программисты там - пофигисты )

У меня не работает в IE (пишет object doesn't support this property or method), если выделение текста в textarea сделать двойным кликом.
IE Version: 6.0.2900.2180.xpsp_sp2_gdr.050301-1519

А чем вам не нравится более простой вариант для этого действия?



text1,tex2,text3 можно заменять чем угодно. 

ммм.. потратил много времени пытаясь подключить эти ф-ции... Сначала получал ошибку Object not defined/expected или что-то в этом роде... потом решил для начала просто подключить файл..

Получил ошибку: Syntax Error on line 94

подключаю так:


файл:


Я даже закоментил ОНЛОАД... но и это не помогло.
Помогите пожалуйста разобраться... ЧЯто-то мне подсказывает что у меня руки кривые.

нашел ответ тут:


спасибо Ciber SLasH !

Sardar, ваш вариант немного не верен...

Вот кусок вашего кода:

Тогда как вместо него надо:

Все дело в том, что mac версия ИЕ поддерживает document.selection, но не поддерживает document.selection.createRange  .
Вот так вот.  

Теперь попрошу кого-нибудь помочь мне со своим кодом: (пример Sardar'a мне не подходит)
Собственно, что не работает:
Все прекрасно работает кроме изменения позиции курсора в ИЕ(у меня стоит 7-я финальная версия)...
С остальными браузерами все просто отлично.  

Вот код(прямо копируйте и вставляйте в файл для запуска, форма, кнопки и т.д. уже имеются):

Помогите пожалуйста! Не знаю, почему этот ие не хочет никак курсор двигать, ни в какую...   

Это сообщение отредактировал(а) GZep - 11.2.2007, 21:56

Да там многое что нужно переделывать, добавлять поддержку множественных селекций и прочее. Руки не дойдут, пока у себя где не запользую, не сдвигаеться с места.

Коллапсировать селекцию это прировнять начало к концу или конец к началу, смотря какое направление. Следовательно если передвинуть конец и сколлапсировать селекцию, то передвинем курсор куда нужно. В твоём случае двигаем только если текста в селекции не было, следовательно достаточно только cursor.moveEnd("character", -close.length);.


На одном поле может быть масса селекций, это такие хендлеры по тексту, помогающие изменять его в некотором месте. Селекция на экране это нечто другое, она обычно одна. Вызовом .select() мы переносим селекцию на экране под конкретную селекцию в скрипте. Короче что бы курсор реально передвинулся 

А cursor.moveStart в моем случае можно не вставлять? Это потому что отсутствует выделение, а имеется только позиция курсора?

А как тогда поставить курсор в ие в самый конец строки? Не выделенной части а всей строки целиком...  


Эта такая особенность в ие?

А вот еще проблема появилась:

Почему так?

Это сообщение отредактировал(а) GZep - 12.2.2007, 17:26

Если не нужно ставить курсор, то не нужно, но тогда и .select() убери. "Курсор" == селекция с нулевой длинной.


Читай абзац выше. Отселектировать всё что нужно, сколлапсировать в начало или в конец. Можно и move(End|Start) использовать. Только не забудь .select() на конце, что бы реальная селекция на экране изменилась.


Нет, это спецификация selection.


Потому что после установки текста селекция всегда коллапсируется. Сделай с неё дубликат, он по моему не должен изменяться. Хотя у ИЕ с дубликатами глюки есть, можно двигать концы одной селекции, а дубликат "магическим способом" тоже будет изменяться. Больше на эту тему в основном разделе о indent'aх в питоне, фича к форумскому полю ответа по ctrl+[].

Вот я как раз это и применял, только толку без  .select() не было. Вот в этом, наверное, и была вся проблема.


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


Спасибо, буду копать, думаю, скоро разберусь и выложу тут как сделать.

Sardar, Даже не знаю, что сказать. Такая помощь! Да чтобы я без Вас делал!  

Да, наверное позже выложу свой универсальный вариант, который, думаю, многим понравиться.

Это сообщение отредактировал(а) GZep - 12.2.2007, 20:13

Sardar, помогите, пожалуйста, не работает.
Вот пример использования:
[только_что_вставленный_тег][текст][/только_что_вставленный_тег][курсор] - все правильно, мне так и надо!
[только_что_вставленный_тег][текст][/только_что_вставленный_тег][курсор][предыдущий_тег][текст][/предыдущий_тег] - нет, мне надо, чтобы курсор в самом конце стоял!

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

Вот что нахимичил...:

Это только кусок, естественно, кода.

Не знаю зачем ставить курсор всегда в конец поля, но можно просто отселектировать всё содержимое и коллапсировать селекцию в конец. 
Обернуть поле в селекцию можно методом .moveToElementText.

Вот так, вроде, должно работать, но опять  

Просто на самом деле уже интересно: получится так сделать или нет.  
Sardar, посмотрите, пожалуйста, что там не так?

Это вообще откуда? Как end вычислил? И вообще зачем, если ты уже отселектировал всё. Я сказал коллапсировать, т.е. .collapse(true)

Sardar, спасибо, получилось  
Описание кода:

• Если имеется выделенный участок, то он обводится тегами, а курсор ставиться в самый конец, для дальнейшего набора текста.
• Если браузер не поддерживает выделение, то в конец добавляется один "открывающий" тег или парный ему "закрывающий", если уже есть "открывающий" тег.
• Прадусматривается mac версия ИЕ, где не поддерживается объект document.selection.createRange
• Предусматривается отмена передачи фокуса если браузер - Opera
• Поддержка нескольких форм ввода

Вот код. Форма воода имеется, можно прямо сохранять и тестить. О багах пишите в эту тему.

Sardar, посмотрите, пожалуйста, кроссбраузерный ли этот код?

Это сообщение отредактировал(а) GZep - 18.2.2007, 12:51

Вроде кроссбраузерный. Есть пара замечаний:

• не храни инфу в глобальных переменных, сейчас ты не сможешь сделать хендлер для более чем одного поля на странице
• открытые теги лучше ложить на стек, а не по хеш-таблице проверять. Иначе порядок закрытия будет не верным

Получается замечательно, но переход курсора в конец текста не всегда удобен - лучше бы он оставался приблизительно на месте редактирования - только вот никак не придумываетсяЮ как бы это сделать.   

Sardar, здравствуйте, у меня такой к Вам вопрос....
Мне вашь пример очень понравился.... только у меня такая проблема.... мне нужна вставка HTML кода под курсором... в опере и файрфоксе  я нормально вставляю через EditField.execCommand('inserthtml',false, "");

ИЕ такой функции нет..... 

Получили селекцию, меняем содержимое через .pasteHTML(html)

спасибо за код. вопрос: а что делать если надо вставить текст под курсором. не ЗАМЕНИТЬ отселектированный текст, а как-то запомнить позицию курсора. в фф это можно а как быть с ИЕ?

Это сообщение отредактировал(а) introtel - 1.6.2009, 15:03

Сам я не местный   но хочу внести вклад.
Я не очень много понимаю в javascript (ну на стадии что-то сломать). Меня очень напрягает писать id и по ним чтоб код работал.   
В общем кому хочется сделать 1 панельку с кнопками на 2-3 или более полей то заменяем:

на

И вписываем onclick

  

Это сообщение отредактировал(а) GogElf - 17.7.2009, 01:50

Тема прикреплена... она еще жива?

Заметил странный баг в оригинальном скрипте. FF 3.6.13



Оригинальный код, просто с прописанными данными для textarea.

Если выделить мышкой несколько строк, но так, чтоб одна из строк была выделена не полностью, например:



После клика по "Test" будет выполнена некорректная ставка.

При выделении мышкой в FF у меня все корректно работает только если выделена лишь часть одной строки, либо несколько строк, но полностью.

В общем, очень жаль, наработка вроде ничего, но работает почему-то некорректно. Судя по всему, что-то с обработкой событий.

ЗЫ: вот и в IE 8 тоже нашел небольшой баг, но это еще терпимо. К примеру, выделяем строки:



После клика по "Test" будет выполнена корректная ставка, но с некорректным выделением (что выделяется - указано жирным):

[test]3 qwerty asdfgh zxcvbn
4 qwerty asdfgh zxcvbn
5 qwerty asdfgh zxcvbn
6 qwerty asdfgh zxcvbn
7 qwerty asdfgh zxcvbn[/test]

Т.е. он начало выделения смещает на минус (количество переводов в выделенной строке - 1).

Как убрать эти баги? Особенно первый. Или подскажите альтернативу. Сам писал-писал, не вышло. Другие варианты смотрел - не подходят.

Необходимо чтоб после вставки текста под курсор, texarea всегда подскролливался к курсору (к месту вставки).

Только чтоб без лишних библиотек и наворотов. Обычная же вещь, с чего сложности?

Заранее благодарю!

Если не понятно о чем речь, могу снять видео и выложить чтоб быстрее было.

Кстати, тут на форуме прогеров (хе-хе ) данная функция тоже не совсем чисто работает. Но то что тут - это уже мелочи. Вообще как на vBulletin сделано - идеал. По крайней мере, так и не нашел к чему докопаться. Другое дело, что что тут, что там - js-ы все шифрованные, собаки.

Браво  
Уважаю, столько сил и терпения надо иметь, что бы написать такой код для форума)

Предлагаю свое решение с использованием плагина caret
Пощупать можно тут накидал демку