Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Javascript: Вставка текста в textarea в положение курсора

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3

Открыть новую тему     Написать ответ в эту тему

Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Paha_W
смотри, как сделано тут - вставляет где надо

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 05:08 17-12-2005
Paha_W



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Cheery
Можно вопрос что именно смотреть ссылки  

Цитата:
Твой вариант: http://ibis-tour.com/wywiwig.html  
Сварги: http://ibis-tour.com/wywiwig2.html  
И новый из того, что я сам отрыл: http://ibis-tour.com/wywiwig3.html

У меня не открываются.
Вариант Svarga у меня стоит на борде но он добавляет только в конец.  
а вот в данном варианте:

Цитата:
 
  <textarea name=test onselect="storeCaret(this)" onclick="storeCaret(this)" onkeyup="storeCaret(this)">  
 
   или  
 
   <input type=text name=test onselect="storeCaret(this)" onclick="storeCaret(this)" onkeyup="storeCaret(this)">  
 
Функция storeCaret:  
 
   function storeCaret(element)  
   {  
           if (document.selection && document.selection.createRange)  
                   element.caretPos=document.selection.createRange().duplicate();  
   }  
 
Функция insertText, которая вставляет текст:  
 
   function insertText(element,text)  
   {  
           if (element && element.caretPos)  
                   element.caretPos.text=text;  
           else if (element && element.selectionStart+1 && element.selectionEnd+1)  
                   element.value=element.value.substring(0,element.selectionStart)+text+e  
lement.value.substring(element.selectionEnd,element.value.length);  
           else if (element)  
                   element.value+=text;  
   }  
 
 
я немогу понять как insertText(element,text) зачем так сделанно
если я правильно понимаю то element это то что прилетает тоесть "текст", а text это просто переменная.
Или нет совсем запутался.
 


----------
Far Far Away
У каждого в голове свои тараканы...

Всего записей: 440 | Зарегистр. 26-05-2004 | Отправлено: 05:48 17-12-2005
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Paha_W

Цитата:
если я правильно понимаю то element это то что прилетает тоесть "текст", а text это просто переменная.  

element это то, куда вставляется.. text - что вставляется.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 05:50 17-12-2005
Paha_W



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Возможно значение element пишем здесь: insertText(element,text)  чтобы не делать так:document.post.message подскажите пожалуйста.

----------
Far Far Away
У каждого в голове свои тараканы...

Всего записей: 440 | Зарегистр. 26-05-2004 | Отправлено: 05:51 17-12-2005
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Paha_W

Цитата:
Возможно значение element пишем здесь: insertText(element,text)  чтобы не делать так:document.post.message подскажите пожалуйста.

Что? я не понимаю вопроса.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 06:00 17-12-2005
Paha_W



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Код:
 
<a href="javascript: quoteSelection();" title="Цитировать выделенный текст." class="nav">Цитата</a>
  <textarea name=test onselect="storeCaret(this)" onclick="storeCaret(this)" onkeyup="storeCaret(this)">    
<script>  
        function quoteSelection() {
                 
                theSelection1 = false;
                theSelection = false;
                theSelection1 = window.getSelection; // Get text selection
                theSelection = document.selection; // Get text selection
                if (theSelection) {
                theSelection = document.selection.createRange().text; // Get text selection
                        // Add tags around selection
                         insertText( '
Цитата:
' + theSelection + '\n
\n');
                        document.post.message.focus();
                        theSelection = '';
                        return;
                }else if (theSelection1){
                theSelection1 = window.getSelection(); // Get text selection
                        // Add tags around selection
                        emoticon( '
Цитата:
' + theSelection1 + '\n
\n');
                        document.post.message.focus();
                        theSelection = '';
                        return;
                }
                else{
                        alert('Выберите текст');
                }
        }
   function storeCaret(theSelection)    
   {    
           if (document.selection && document.selection.createRange)    
                   theSelection.caretPos=document.selection.createRange().duplicate();    
   }    
   
   function insertText(theSelection,text)    
   {    
           if (theSelection && theSelection.caretPos)    
                   theSelection.caretPos.text=text;    
           else if (theSelection && theSelection.selectionStart+1 && theSelection.selectionEnd+1)    
                   theSelection.value=theSelection.value.substring(0,theSelection.selectionStart)+text+e  
lement.value.substring(theSelection.selectionEnd,theSelection.value.length);    
           else if (theSelection)    
                   theSelection.value+=text;    
   }  
</script>
 

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

----------
Far Far Away
У каждого в голове свои тараканы...

Всего записей: 440 | Зарегистр. 26-05-2004 | Отправлено: 06:08 17-12-2005
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Paha_W

Цитата:
Вот так вот не работает вы можете поправить красным что не так я делаю и какие у меня ошибки, и как их исправить.

в FF набери в адресной строке javascript: и читай.
ps: юзай getElementById, а не
Цитата:
document.post.message.focus();  



----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 06:19 17-12-2005
Paha_W



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Цитата:
в FF набери в адресной строке javascript: и читай.

Я так и ищу ошибку как вы до этого мне и говорили, но версия FF 1.5 мне говорит что у меня обшика в том что у меня не определена quoteSelection();
Как  мне оперделить функцию?
На счет getElementById
У мен так:

Цитата:
document.post.message.focus();

А делать так?

Цитата:
document.getElementById();



----------
Far Far Away
У каждого в голове свои тараканы...

Всего записей: 440 | Зарегистр. 26-05-2004 | Отправлено: 06:35 17-12-2005
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Paha_W
Может почитаешь сначала учебники по JS?
document.getElementById('message').focus();
соответственно message определено как id, а не name

Цитата:
Как  мне оперделить функцию?  

создать ее и описать. если написана, значит JS не воспринимает ее по причине синтаксической ошибки либо потому, что обращение к ней идет до того, как она определена - твой случай.
хотя если у тебя функция в a href, то лучше смотреть код самой функции.
тут сложно оценить, так как идет обработка тагов [q]
пиши все либо в [code][/code] либо между [no][/no]

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 06:41 17-12-2005 | Исправлено: Cheery, 07:15 17-12-2005
Paha_W



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Cheery
Вот последний вариант
 
<script>    
        function quoteSelection() {  
                 
                theSelection1 = false;  
                theSelection = false;  
                theSelection1 = window.getSelection; // Get text selection  
                theSelection = document.selection; // Get text selection  
                if (theSelection) { theSelection = document.selection.createRange().text; // Get text selection  
                        // Add tags around selection  
                        insertText('[q]' + theSelection + '\n [/q]\n');  
                        document.getElementById('message').focus();  
                        theSelection = '';  
                        return;  
                }else if (theSelection1){ theSelection1 = window.getSelection(); // Get text selection  
                        // Add tags around selection  
                        insertText('[q]' + theSelection1 + '\n [/q]\n');  
                        document.getElementById('message').focus();  
                        theSelection = '';  
                        return;  
                }  
                else{  
                        alert('Выберите текст');  
                }  
        }  
   function storeCaret(theSelection)    
   {    
           if (document.selection && document.selection.createRange)    
                   theSelection.caretPos=document.selection.createRange().duplicate();    
   }    
   
   function insertText(theSelection,text)    
   {    
           if (theSelection && theSelection.caretPos)    
                   theSelection.caretPos.text=text;    
           else if (theSelection && theSelection.selectionStart+1 && theSelection.selectionEnd+1)    
                   theSelection.value=theSelection.value.substring(0,theSelection.selectionStart)+text+theSelection.value.substring(theSelection.selectionEnd,theSelection.value.length);    
           else if (theSelection)    
                   theSelection.value+=text;    
   }    
</script>
 
Текст текстТекст текстТекст текстТекст текстТекст текстТекст текст
 
<textarea name='message' rows='15' cols='125' wrap='virtual' tabindex='3' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea><br>
<a href="javascript:quoteSelection();" title="Цитировать выделенный текст." class="nav">Цитата</a>
 
Сейчас фф выдает ошибку в 17 строчке  
тоесть

Цитата:
 
document.getElementById('message').focus();  
 


----------
Far Far Away
У каждого в голове свои тараканы...

Всего записей: 440 | Зарегистр. 26-05-2004 | Отправлено: 07:19 17-12-2005
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Сейчас фф выдает ошибку в 17 строчке  

ну я же написал выше.. не name='message', a id='message'

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 07:23 17-12-2005
Paha_W



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Cheery
http://www.khspu.ru/~Board/js/5.htm
Вставляет в Мозилле 1.0.7  

Цитата:
undefined

http://www.khspu.ru/~Board/js/2.htm
Скрипт из борды мое обоснование работы если я в чем-то не прав напишите.
 
Вот последний вариант рабочий, но в данном варианте есть небольшой косяк в Мозиле ФФ не вставляет на место курсора, а просто добавляет в конец строки.
 

Код:
 
    function quoteSelection() {  
               theSelection = false;  
               if (document.selection) { theSelection = document.selection.createRange().text; // Get text selection  
                       // Add tags around selection  
                       emoticon('[_quote]' + theSelection + '[_/quote]\n');  
                       document.getElementById('message').focus();  
                       theSelection = '';  
                       return;  
               }else if (window.getSelection){ theSelection = window.getSelection(); // Get text selection  
                       // Add tags around selection  
                       emoticon('[_quote]' + theSelection + '[_/quote]\n');  
                       document.getElementById('message').focus();  
                       theSelection = '';  
                       return;  
               }  
               else{  
                       alert('{L_NO_TEXT_SELECTED}');  
               }  
       }  
 
       function storeCaret(textEl) {
               if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
       }
       
       function emoticon(text) {
               if (document.post.message.createTextRange && document.post.message.caretPos) {
                       var caretPos = document.post.message.caretPos;
                       caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
                       document.post.message.focus();
               } else {
                       document.post.message.value  += text;
                       document.post.message.focus();
               }
       }
 
</script>
                               Для вставки цитаты, выделите её и нажмите
                               <span  class="nav"><a href="javascript:quoteSelection();" title="Цитировать выделенный текст." class="nav">{L_QUOTE_SELECTED}</a></span><br /><br />
                              <textarea name='message' id='message' rows='15' cols='125' wrap='virtual' tabindex='3' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea>
 



----------
Far Far Away
У каждого в голове свои тараканы...

Всего записей: 440 | Зарегистр. 26-05-2004 | Отправлено: 03:57 22-12-2005 | Исправлено: Paha_W, 10:16 22-12-2005
Paha_W



Full Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Cheery
Вот тут пошаманил с кодом от phpbb вроде все работает, не могли бы проверить.
создаем script.js файлик вот с таким содержимым

Код:
 
var text_no_selected = "Выберите текст для вставки";  
 
var clientPC = navigator.userAgent.toLowerCase();  
var clientVer = parseInt(navigator.appVersion);  
 
var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;
 
var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);
 
function mozillaWr(textarea, open, close)
         {
       var selLength = textarea.textLength;
      var selStart = textarea.selectionStart;
     var selEnd = textarea.selectionEnd;
      if (selEnd == 1 || selEnd == 2)
         selEnd = selLength;
 
     var s1 = (textarea.value).substring(0,selStart);
     var s2 = (textarea.value).substring(selStart, selEnd)
      var s3 = (textarea.value).substring(selEnd, selLength);
     textarea.value = s1 + open + s2 + close + s3;
 
     textarea.selectionEnd = 0;
     textarea.selectionStart = selEnd + open.length + close.length;
     return;
         }
 
function insert_into_position_cursor(text)  
         {
        var textarea = document.post.message;
     if (textarea.createTextRange && textarea.caretPos)  
        {
           var caretPos = textarea.caretPos;
        caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
        }
     else {
           if (is_nav && document.getElementById)  
              {
              mozillaWr(textarea, '', text);
              }
           else { textarea.value  += text; }
          }
     textarea.focus();
         }
 
function copySelection()
         {
     if      (window.getSelection)   { selection = window.getSelection().toString();      }
     else if (document.getSelection) { selection = document.getSelection();               }
     else if (document.selection)      { selection = document.selection.createRange().text; }
         }
 
function pasteSelection()
        {
    if (selection)
           {  
       insert_into_position_cursor('[_quote]' + selection + '[_/quote]\n');  
       selection = '';
       document.post.message.focus();  
       return;  
          }
    else { alert(text_no_selected); return; }  
        }
// функцию можно также использовать потом как облачение теги code, можно в b ....
//На самом деле как вы уже поняли этим не ограничивается создаем сколько нам нужно функций и юзаем их
function codeSelection(text)  
         {
      text = '[_code] ' + text + ' [_/code]';
     insert_into_position_cursor(text);
         }
 
function storeCaret(textEl)  
         {
     if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
         }
 

и форма

Код:
 
<script language="JavaScript" type="text/javascript" src="script.js"></script>
<form method="post" name="post">
<table border="1" width="98%">
        <tr><td colspan="2" align="center"><b>!!!!Выдели меня!!!!</b></td></tr>
    <tr>
     <td width="135">
          <table width="100%" border="0">
            <tr>  
                <td valign="middle" align="center"> <br />
                <table width="100" border="0" cellspacing="0" cellpadding="5">
                    <tr align="center" valign="middle">  
                <td>Для вставки цитаты, выделите её и <a onmouseover="copySelection()" href="javascript:pasteSelection()">нажмите эту ссылку</a><br>Для вставки кода, выделите её и <a onmouseover="copySelection()" href="javascript:codeSelection()">нажмите эту ссылку</a> </td>
                </tr>
                </table>
                </td>
            </tr>
            </table>
        </td>
        <td><textarea name="message" rows="15" cols="100" wrap="virtual" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea><br /></td>
    </tr>
</table>
</form>
 


----------
Far Far Away
У каждого в голове свои тараканы...

Всего записей: 440 | Зарегистр. 26-05-2004 | Отправлено: 10:51 23-12-2005 | Исправлено: Paha_W, 11:17 23-12-2005
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Paha_W
Получается, что весь этот код работает только для того, что бы обрамить выделенный текст тегом и вставить его в определённйю зону?
Тогда это слишком громоздко.

Всего записей: 4160 | Зарегистр. 03-02-2011 | Отправлено: 20:13 23-04-2012
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VVL99

Цитата:
Тогда это слишком громоздко.

если есть свои варианты, то показывайте.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:20 23-04-2012
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот простой вариант. Я не преследовал кроссбраузерность, по этому если вам нужен IE или OPERA, то нужно добавить пару условий, я делаю себе расширение для хрома.
Значит код выполняет три "функции":
1) Вставляет бб код в определённое поле ввода.
2) Обрамляет тегом выделенный текст на странице и вставляет результат в поле ввода.
3) Обрамляет тегом выделенный текст в поле ввода.
 

Код:
 
<html>
<body>
<p>Попробуйте выделить часть этого текста мышкой или напечатать свой и нажать на ссылку BB code или просто нажмите ссылку.</p>
<textarea id = "postarea" class = "text_area" rows = "5" cols = "120" name = "txt"></textarea>
<a href="#" onClick = "javascript:tag_add(postarea)"><b>BB code</b></a>
</body>
<script>
function tag_add(obj) {
    var text = window.getSelection();
    var start = obj.selectionStart;
    var end = obj.selectionEnd;
    val = obj.value.substr(start,end-start);
    str1 = '[spoiler]';
    str2 = '[/spoiler]';
    if (val) {
        obj.value = obj.value.substr(0, start) + str1 + val + str2 + obj.value.substr(end);
    }
    else if (text) {
        obj.value = obj.value.substr(0, start) + str1 + text + str2 + obj.value.substr(end);
    }
    else {
        obj.value = obj.value + str1 + str2;
    }
}
</script>
</html>
 

 
Ох не посмотрел, последний поста отправлен в 2005 году.

Всего записей: 4160 | Зарегистр. 03-02-2011 | Отправлено: 21:04 23-04-2012 | Исправлено: VVL99, 21:06 23-04-2012
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VVL99

Цитата:
по этому если вам нужен IE или OPERA,

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

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:06 23-04-2012 | Исправлено: Cheery, 21:08 23-04-2012
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ну под все версии это уж слишком.
У меня вот вопрос есть, я хотел разобраться, но так и не доходят руки, было бы правельнее если текст вставляется не в определённое поле, а именно туда где каретка курсора, поскольку поля ввода бывают разные и даже скриптовые, и ctrl+V всегда правильно определяет, а вот скриптовую версию не разу не видел.

Всего записей: 4160 | Зарегистр. 03-02-2011 | Отправлено: 21:11 23-04-2012
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
VVL99

Цитата:
а вот скриптовую версию не разу не видел.

по событиям onselect, onclick, onkeyup, onfocus, к примеру, "запоминайте" в каком элементе находится курсор

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:18 23-04-2012 | Исправлено: Cheery, 21:18 23-04-2012
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кстати, вот голая функция, если выделить текст на странице и вызвать её, то она покажет текст в модале, причём работает во всех браузерах и не такая уж громоздкая.

Код:
 
var ie = false;
    if ( window.getSelection ) {  
        var selectedText = window.getSelection();  
    } else if ( document.getSelection ) {  
        var selectedText = document.getSelection();  
    } else if ( document.selection ) {  
        ie = true;
        var selectedText = document.selection.createRange();  
    }  
    if(!ie){
        alert(selectedText)//  просто выведет выделенный текст без тегов  
        var theParent = selectedText.getRangeAt(0).cloneContents();  
        alert(toHTML(theParent)) // собственно выделенный кусок кода  
    }else{
        alert(selectedText.text) // текст
        alert(selectedText.htmlText) // выделенный кусок кода
    }
 

Всего записей: 4160 | Зарегистр. 03-02-2011 | Отправлено: 21:19 23-04-2012
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3

Компьютерный форум Ru.Board » Интернет » Web-программирование » Javascript: Вставка текста в textarea в положение курсора


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru