Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Вставка тега в заданную позицию Textarea 
:(
    Опции темы
rcdimon
Дата 4.5.2006, 22:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2
Вот делаю некое пободие редактора.. Есть панель с тегами. И textarea. Мне нажо что бы при нажатии на тег он вставлялся туда, где сейчас находится курсор. А после вставки курсор вставал бы между половинками тега <b>ТУТ</b>

Мне удалось реализовать это под браузерами Опера и мозила. Но в IE радотать не хочет. Пожалуйста помогите сделать подобный код под IE.

Вот код под оперу и мозилу

Код

function insert_to_textarea ($position, $sdata,$mdata,$edata, $postobject){
    if ( (ua_vers >= 4) && is_ie && is_win ){
        // Fuc*ed Internet Explorer :)

    } else {
        // Normal browser
        if (!$position){
            var $ss            = $postobject.selectionStart;
            var $se                = $postobject.selectionEnd;
            var $lenght            = $postobject.textLength;
            var $start        = ($postobject.value).substring(0, $ss);
            var $middle            = ($postobject.value).substring($ss, $se);
            var $end         = ($postobject.value).substring($se, $lenght);
            $postobject.value    = $start + $sdata + $middle + $edata + $end;
            
            var cpos = $ss + ($sdata.length);
            $postobject.selectionStart = cpos;
            $postobject.selectionEnd   = cpos;
            
        } else {
            if ($position == 'start'){
                $postobject.value    = $sdata + $mdata + $edata + $postobject.value;
            }    
            if ($position == 'end'){
                $postobject.value = $postobject.value + $sdata + $mdata + $edata;
            }
        }
        $postobject.focus();
        
    }
}

 
PM MAIL ICQ   Вверх
12345c
Дата 4.5.2006, 23:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Вы не  хотите посмотреть или скопировать то, как сделано в http://forum.vingrad.ru/index.php?showtopic=35775 - "Как вставить текст под курсором ,
исчерпывающий ответ"?

И здесь обсуждение: http://forum.vingrad.ru/index.php?showtopic=55935 
PM WWW   Вверх
igorold
Дата 5.5.2006, 06:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 557
Регистрация: 22.12.2005
Где: Россия->Урал-& gt;Миасс

Репутация: 2
Всего: 17
Вот скрипт, который работает и в Мозилле и в IE:
Код

function copyTC(cl,obj,varr,obj2) {
    if (varr==0)
    {
        teg1 = '[COLOR='+cl+']';
        teg2 = '[/COLOR]';
        document.getElementById(obj2).value = '#444444';
    }
    else if (varr==1)
    {
        teg1 = '[SIZE='+cl+']';
        teg2 = '[/SIZE]';
    }
    else if (varr==2)
    {
        teg1 = '<'+cl+'>';
        teg2 = '</'+cl+'>';
    }
    document.getElementById(obj).focus();
    if (document.selection)                     // -------------------------->   этот кусок для IE
    {
      var s = document.selection.createRange();
      if (s.text)
      {
        s.text=teg1+s.text+teg2;
        s.select();
      }
    }
    else if (typeof(document.getElementById(obj).selectionStart) != 'undefined')
    {
      var start = document.getElementById(obj).selectionStart;
      var end = document.getElementById(obj).selectionEnd;
      text1 = document.getElementById(obj).value.substring(0,start);
      text  = document.getElementById(obj).value.substring(start,end);
      text2 = document.getElementById(obj).value.substring(end);
      document.getElementById(obj).value=text1+teg1+text+teg2+text2;
      document.getElementById(obj).setSelectionRange(start,start);
    }
    else
    {
      document.getElementById(obj).value=document.getElementById(obj).value+teg1+teg2;
    }
    //document.getElementById(obj).focus();
}
 


--------------------
... у семи нянек 14 сисек ...  
Putin here, Putin there, Putin almost everywhere!
PM MAIL   Вверх
rcdimon
Дата 5.5.2006, 07:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2
Нет. Там я ничего не понял. Всякие нагромождения кода... Вставляю в браузер- выдают ошибки...

Помогите, пожалуйста!  
PM MAIL ICQ   Вверх
rcdimon
Дата 5.5.2006, 07:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2
Цитата

Вот скрипт, который работает и в Мозилле и в IE:


Ну не работает он!

Никаких ошибок не выдает и не работает!

Добавлено @ 07:37 
Он почему-то всегда идет по первому условию if (document.selection)

Даже если ничего не выделено... Или я вообще не понимаю что тут происходит? Объясните  smile  
PM MAIL ICQ   Вверх
igorold
Дата 5.5.2006, 07:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 557
Регистрация: 22.12.2005
Где: Россия->Урал-& gt;Миасс

Репутация: 2
Всего: 17
Этот скрипт нельзя просто вставить в страничку, его надо адаптировать, вот мой конкретный пример:
там для TEXTAREA с id="tex" и выполняется этот скрипт, посмотри на вызов скрипта и сам скрипт и поймешь ... я в свое время так же делал ... 
Код

<TEXTAREA NAME="Description" cols="110" rows="20" id="tex">[% TaskText %]</TEXTAREA>
<table border=0 cellpadding=3 cellspacing=3>
<tr>
<td align=center><input type="button" name="addcodeb" value=" Ж " style="font-weight: bold; width: 30px" onClick="copyTC('b','tex',2)" title="Жирный шрифт">
<td align=center><input type="button" name="addcodei" value=" К " style="font-style: italic; width: 30px" onClick="copyTC('i','tex',2)" title="Курсив">
<td align=center><input type="button" name="addcodeu" value=" П " style="text-decoration: underline; width: 30px" onClick="copyTC('u','tex',2)" tite="Подчеркивание">
<tr bgcolor="#F0F0F0">
<td align=center><input type="button" name="addcode1" value=" +1 " style="width: 40px" onClick="copyTC('+1','tex',1)" title="Увеличение размера шрифта на 1">
<td align=center><input type="button" name="addcode2" value=" +2 " style="width: 40px" onClick="copyTC('+2','tex',1)" title="Увеличение размера шрифта на 2">
<td>&nbsp;
</tr>
<tr>
<td colspan="3" align=center>
<select name="addcolor" id="addcolor" onChange="copyTC(this.form.addcolor.options[this.form.addcolor.selectedIndex].value,'tex',0,'addcolor')">
    <option style="color:black; background-color: #E7E7E7" value="#444444" class="genmed">Цвет шрифта:</option>
    <option style="color:darkred; background-color: #E7E7E7" value="darkred" class="genmed">Тёмно-красный</option>
    <option style="color:red; background-color: #E7E7E7" value="red" class="genmed">Красный</option>
    <option style="color:orange; background-color: #E7E7E7" value="orange" class="genmed">Оранжевый</option>
    <option style="color:brown; background-color: #E7E7E7" value="brown" class="genmed">Коричневый</option>
    <option style="color:yellow; background-color: #E7E7E7" value="yellow" class="genmed">Жёлтый</option>
    <option style="color:green; background-color: #E7E7E7" value="green" class="genmed">Зелёный</option>
    <option style="color:olive; background-color: #E7E7E7" value="olive" class="genmed">Оливковый</option>
    <option style="color:cyan; background-color: #E7E7E7" value="cyan" class="genmed">Голубой</option>
    <option style="color:blue; background-color: #E7E7E7" value="blue" class="genmed">Синий</option>
    <option style="color:darkblue; background-color: #E7E7E7" value="darkblue" class="genmed">Тёмно-синий</option>
    <option style="color:indigo; background-color: #E7E7E7" value="indigo" class="genmed">Индиго</option>
    <option style="color:violet; background-color: #E7E7E7" value="violet" class="genmed">Фиолетовый</option>
    <option style="color:white; background-color: #E7E7E7" value="white" class="genmed">Белый</option>
    <option style="color:black; background-color: #E7E7E7" value="black" class="genmed">Чёрный</option>
</select>
</tr>
</table>
 


--------------------
... у семи нянек 14 сисек ...  
Putin here, Putin there, Putin almost everywhere!
PM MAIL   Вверх
rcdimon
Дата 5.5.2006, 07:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2
Этот твой код хорошо работат, когда я выделяю кусок текста! Тогда он выделенный кусок текста берет в теги. Все ок. Но если я ничего не выделил он ничего не делает. А мне надо что бы в таком случае он просто ставил открывающий и закрывающий теги на месте курсора 
PM MAIL ICQ   Вверх
igorold
Дата 5.5.2006, 08:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 557
Регистрация: 22.12.2005
Где: Россия->Урал-& gt;Миасс

Репутация: 2
Всего: 17
а ты сделай так:
Код

function copyTC(cl,obj,varr,obj2) {
    if (varr==0)
    {
        teg1 = '[COLOR='+cl+']';
        teg2 = '[/COLOR]';
        document.getElementById(obj2).value = '#444444';
    }
    else if (varr==1)
    {
        teg1 = '[SIZE='+cl+']';
        teg2 = '[/SIZE]';
    }
    else if (varr==2)
    {
        teg1 = '<'+cl+'>';
        teg2 = '</'+cl+'>';
    }
    document.getElementById(obj).focus();
    if (document.selection)                     // -------------------------->   этот кусок для IE
    {
      var s = document.selection.createRange();
      if (s.text)
      {
        s.text=teg1+s.text+teg2;
        s.select();
      }
      else     // добавь это - начало
      {
        document.getElementById(obj).value=document.getElementById(obj).value+teg1+teg2;
      }      // добавь это - конец
    }
    else if (typeof(document.getElementById(obj).selectionStart) != 'undefined')
    {
      var start = document.getElementById(obj).selectionStart;
      var end = document.getElementById(obj).selectionEnd;
      text1 = document.getElementById(obj).value.substring(0,start);
      text  = document.getElementById(obj).value.substring(start,end);
      text2 = document.getElementById(obj).value.substring(end);
      document.getElementById(obj).value=text1+teg1+text+teg2+text2;
      document.getElementById(obj).setSelectionRange(start,start);
    }
    else
    {
      document.getElementById(obj).value=document.getElementById(obj).value+teg1+teg2;
    }
    //document.getElementById(obj).focus();
}


Добавлено @ 08:11 
этот скрипт ведь не догма, а средство для импровизации ....  smile  


--------------------
... у семи нянек 14 сисек ...  
Putin here, Putin there, Putin almost everywhere!
PM MAIL   Вверх
rcdimon
Дата 5.5.2006, 08:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2
Ну теперь когда ничего не выделено теги добавляются в конец текста, а не на место курсора smile  
PM MAIL ICQ   Вверх
igorold
Дата 5.5.2006, 08:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 557
Регистрация: 22.12.2005
Где: Россия->Урал-& gt;Миасс

Репутация: 2
Всего: 17
ну да, в конец .... ну тогда ты подумай как это решить и я подумаю,  поищу как это решается, я не задавался проблемой это сделать ... 
т.к. в мозилле это работает ....  smile  


--------------------
... у семи нянек 14 сисек ...  
Putin here, Putin there, Putin almost everywhere!
PM MAIL   Вверх
rcdimon
Дата 5.5.2006, 08:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2
Надо попробовать разобраться в кодах IPB... тут то все работает!

Мне на IE Тоже положить! Но заказчик требует что бы все работало в IE Опере и мозиле! 
PM MAIL ICQ   Вверх
igorold
Дата 5.5.2006, 09:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 557
Регистрация: 22.12.2005
Где: Россия->Урал-& gt;Миасс

Репутация: 2
Всего: 17
а где можно посмотреть эти коды IPB? 


--------------------
... у семи нянек 14 сисек ...  
Putin here, Putin there, Putin almost everywhere!
PM MAIL   Вверх
rcdimon
Дата 5.5.2006, 09:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2
Сохраняешь вот эту страницу! И она сохраняется вместе с картинками и горами скриптов

Добавлено @ 09:58 
В Invision Power Board оптимизация отдельно под каждый браузер и даже под ОСи разные есть.. 
PM MAIL ICQ   Вверх
12345c
Дата 5.5.2006, 12:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
А зачем пошли вообще на сложности с s.text!='' ? Берите это. Но тут ещё много недостатков - в Мозилле выделение попадает в начало тега, а надо или в конец, или так, как я сделал в IE (разница в положении курсора между случаем, прежде выделенным, и невыделенным). При отсутствии курсора в поле его нужно ставить в конец, а он попадает в начало.

Код
<TEXTAREA NAME="Description" cols="110" rows="20" id="tex">[% TaskText %]</TEXTAREA>
<table border=0 cellpadding=3 cellspacing=3>
<tr>
<td align=center><input type="button" name="addcodeb" value=" Ж " style="font-weight: bold; width: 30px" onClick="copyTC('b','tex',2)" title="Жирный шрифт">
<td align=center><input type="button" name="addcodei" value=" К " style="font-style: italic; width: 30px" onClick="copyTC('i','tex',2)" title="Курсив">
<td align=center><input type="button" name="addcodeu" value=" П " style="text-decoration: underline; width: 30px" onClick="copyTC('u','tex',2)" tite="Подчеркивание">
<tr bgcolor="#F0F0F0">
<td align=center><input type="button" name="addcode1" value=" +1 " style="width: 40px" onClick="copyTC('+1','tex',1)" title="Увеличение размера шрифта на 1">
<td align=center><input type="button" name="addcode2" value=" +2 " style="width: 40px" onClick="copyTC('+2','tex',1)" title="Увеличение размера шрифта на 2">
<td>&nbsp;
</tr>
<tr>
<td colspan="3" align=center>
</tr>
</table>

<script>function copyTC(cl,obj,varr,obj2) {
    if (varr==0)
    {
        teg1 = '[COLOR='+cl+']';
        teg2 = '[/COLOR]';
        document.getElementById(obj2).value = '#444444';
    }
    else if (varr==1)
    {
        teg1 = '[SIZE='+cl+']';
        teg2 = '[/SIZE]';
    }
    else if (varr==2)
    {
        teg1 = '<'+cl+'>';
        teg2 = '</'+cl+'>';
    }
    document.getElementById(obj).focus();
    if (document.selection)                     // -------------------------->   этот кусок для IE
    {
      var s = document.selection.createRange();
      var s1=s.text?0:-teg2.length;
        s.text=teg1+s.text+teg2;
        s.move('character',s1);
        s.select();
    }
    else if (typeof(document.getElementById(obj).selectionStart) != 'undefined')
    {
      var start = document.getElementById(obj).selectionStart;
      var end = document.getElementById(obj).selectionEnd;
      text1 = document.getElementById(obj).value.substring(0,start);
      text  = document.getElementById(obj).value.substring(start,end);
      text2 = document.getElementById(obj).value.substring(end);
      document.getElementById(obj).value=text1+teg1+text+teg2+text2;
      document.getElementById(obj).setSelectionRange(start,start);
    }
    else
    {
      document.getElementById(obj).value=document.getElementById(obj).value+teg1+teg2;
    }
    //document.getElementById(obj).focus();
}
</script>


Добавлено @ 12:34 
Да, в Опере оно начинает работать с 8.01, что я отладить сейчас не могу. 


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
rcdimon
Дата 5.5.2006, 13:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 766
Регистрация: 12.7.2004
Где: Москва

Репутация: нет
Всего: 2
Под оперу у меня уже давно отдельный код. Отлично работающий... Мне главное под IE Написать че нить  smile  
PM MAIL ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1201 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.