Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Наши скрипты > Вставка текста под курсором - 2

Автор: Black 18.6.2005, 02:46

Скрипт вставки текста под курсором:

Код


<html>
<head>
    <title>.: ВСТАВКА ТЕКСТА ПОД КУРСОРОМ :.</title>

<style type='text/css'>
body { background: #c0c0c0; font-family: verdana; font-size: 13px; font-variant: small-caps; }
input { border: black solid 1px; background: wheat; padding-left: 3px; }
</style>

<script type="text/javascript">
// Скрипт для вставки текста под курсор.
// Author: PHP-DIRECTOR <[email protected]>
// Протестировано в IE 6.0, FireFox 1.0.4, Opera 8.0, 8.01

// название текстового поля (<input type='text' id='mess' />)
// вставьте значение атрибута id текстового поля
name = 'mess';

// позиция курсора по умолчанию
cursor = 0;

// получаем текстовое поле в переменную
function obj() { str = document.getElementById(name); }

// отслеживаем позицию курсора
function position()
{
 if (!document.selection) { cursor = str.selectionStart; }
}

// вставляем текст под курсор
function InsertText(text)
{

    // если это браузер Opera, то не передаем фокус текстовому полю (иначе будут глюки)
    if(navigator.userAgent.indexOf('Opera')==-1) { str.focus(); }

    // действия для браузера MSIE, Opera
    if (document.selection) { document.selection.createRange().text = text + ' '; }

    // действия для браузера FireFox, Mozilla
    else
    {
        // разделяем исходную строку на две переменные
        // strFirst - строка ДО вставки текста
        // strEnd - строка ПОСЛЕ вставки текста
        var strFirst = str.value.substr(0, cursor);
        var strEnd   = str.value.substr(cursor, str.value.length);

        // обработка строк (удаление лишних пробелов)
        if(strFirst=='') { var raz1 = ''; var raz2 = ' '; var num = 1; }
        else
        {
        var raz1 = '';  var raz2 = ''; var num = 0;
        // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
        if (!/^.*(\s{1,})$/.test(strFirst)) { raz1 = " "; num++; }
        if (!/^(\s{1,}).*$/.test(strEnd)) { raz2 = " "; num++; }
        }
        // формируем новую строку (с вставленным текстом ПО СЕРЕДИНЕ)
        // и полученную строку вставляем в текстовое поле
        str.value = strFirst + raz1 + text + raz2 + strEnd;
        // вычисляем новое значение положения курсора
        cursor = strFirst.length + text.length + num;
        // ставим курсор в текстовое поле сразу после вставленного текста
        str.selectionStart = str.selectionEnd = cursor;
    }
}
</script>

</head>

<body onload='obj();document.getElementById(name).focus();'>

<form action='javascript:void(0)'>
Текстовое поле: <input type='text' id='mess' onclick='position()' onblur='position()' size='60' /><br />
</form>

<a href='javascript:void(0)' onclick='InsertText("ie")'>ie</a><br />
<a href='javascript:void(0)' onclick='InsertText("opera")'>opera</a><br />
<a href='javascript:void(0)' onclick='InsertText("firefox")'>firefox</a><br />

</body>
</html>

Просьба протестировать скрипт в Opere ниже 8 версии.

Работает в IE, FireFox, Opera 8.
Лучше всего работает в FireFox, затем IE, Opera.
В Opera бывают глюки.

Пример и инструкции по использованию в прикреплённом файле.
Если будете использовать скрипт в ваших проектах желательно сохранять копирайт или хотя бы меня известите.

Жду предложений по усовершенствованию скрипта smile

Автор: Sardar 18.6.2005, 21:31

Цитата(PHP @ 18.6.2005, 01:46)

если это браузер Opera, то не передаем фокус текстовому полю (иначе будут глюки)

Очень полезное замечание, на досуге подправлю свой код, вероятно это и есть причина глюков в Опере.

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

Автор: sergejzr 18.6.2005, 21:36

Цитата(PHP @ 18.6.2005, 01:46)

Просьба протестировать скрипт в Opere ниже 8 версии.

Там такое вообще не работает smile

selection заработал только в 8 версии.

Автор: Black 19.6.2005, 00:23

Sardar

Цитата

ты забыл для ИЕ при потере фокуса сохранять селекцию

кстати, я не пойму как это сделать.

Дай подсказку smile

Вот альтернативный скрипт:

Код


<script>
function addText( input, insText ) {
 input.focus();
 if( input.createTextRange ) {
  document.selection.createRange().text += insText;
 } else if( input.setSelectionRange ) {
  var len = input.selectionEnd;
  input.value = input.value.substr( 0, len )
   + insText + input.value.substr( len );
  input.setSelectionRange(len+insText.length,len+insText.length);
 } else { input.value += insText; }
}
</script>
<form onsubmit="return false;">
<textarea></textarea>
<input type="button" onclick="addText(this.form.elements[0],';)');"
value=":)">
</form>

Но вот проблема. Стоит вместо <textarea></textarea> поставить input и Opera начинает ставить текст в конец, а не под курсор.

Кто может это объяснить???

Вот также пытаюсь сделать эмуляцию selectionStart/selectionEnd в Internet Explorer:

Код



 str = document.getElementById('id_type_text');
 var text = 'Текст который необходимо вставить в текстовое поле';

 str.focus();
   
var input1 = str.createTextRange();
 var input2 = input1.duplicate();
 var sel = document.selection.createRange();
 
input1.setEndPoint('StartToStart', sel);
 input2.setEndPoint('EndToStart', sel);

 var str1 = input2.text;
 var str2 = input1.text;

 str.value = str1 + ' ' + text + ' ' + str2;

Если в <input type='text' value=''> поставить курсор, то его позиция записывается в selection
Это даёт нам возможность осуществлять вставку данных под курсор.
Например:

document.selection.createRange().text += NeedText;

Но вот если в этот же <input type='text' id='sss'> вставить данные таким образом:

document.getElementById('sss').value='ля-ля';
то в этом случае позиция selection теряется и курсор перемещается в конец текстового поля.

Интересно, нельзя ли как-нибудь отслеживать позицию selection (сохранять ее) и в случае вставки данных в текстовое поле через
document.getElementById('sss').value возвращать позицию в нужное нам место.

При этом я понимаю надо действовать так. Извлечь сохраненную позицию selection прибавить к ней длину вставленной строки через
document.getElementById('sss').value и установить курсор в это место.

Вот как самому передвигать курсор в текстовом поле на нужное кол-во символов я не могу понять . Как я понял Sardar'y удалось сохранить положение курсора. Вот теперь бы суметь его двигать.

после строки str.value = str1 + ' ' + text + ' ' + str2;

курсор уходит в конец текстового поля. Я хочу его вернуть в нужное мне место, то есть как будто произошел простой:
document.selection.createRange().text += NeedText;

Т.е. курсор надо вернуть назад на определенное кол-во символов, которое зависит от длины вставленной строки.

Например, это делается в Mozilla с помощью:
str.selectionStart = str.selectionEnd = позиция курсора;
где str нужное нам текстовое поле.

Жду комментариев smile

Автор: Black 19.6.2005, 14:45

Вот доработал скрипт:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>.: ВСТАВКА ТЕКСТА ПОД КУРСОРОМ :.</title>

<style type='text/css'>
body { background: #c0c0c0; font-family: verdana; font-size: 13px; font-variant: small-caps; }
input { border: black solid 1px; background: wheat; padding-left: 3px; }
</style>

<script type="text/javascript">
// Скрипт для вставки текста под курсор.
// Author: PHP-DIRECTOR <[email protected]>
// Протестировано в IE 6.0, FireFox 1.0.4, Opera 8.0, 8.01

// название текстового поля (<input type='text' id='mess' />)
// вставьте значение атрибута id текстового поля
name = 'mess';

// позиция курсора по умолчанию
cursor = 0;

// получаем текстовое поле в переменную
function obj() { str = document.getElementById(name); }

// отслеживаем позицию курсора
function position()
{
 if (!document.selection) { cursor = str.selectionStart; }
}

// вставляем текст под курсор
function InsertText(text)
{
    str.focus();

    // если это браузер Opera
    if(navigator.userAgent.indexOf('Opera')>0) { document.selection.createRange().text += ' ' + text + ' '; return true; }

    // действия для браузера IE
    if (document.selection)
    {
    // создание объектов TextRange
    var input1 = str.createTextRange();
    var input2 = input1.duplicate();
    var sel = document.selection.createRange();

    // эмуляция selectionStart/selectionEnd в IE
    input1.setEndPoint('StartToStart', sel);
    input2.setEndPoint('EndToStart', sel);

    // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
    var raz1=''; var raz2='';

    if(input2.text=='') { var raz1 = ''; }
    else { if (!/^.*(\s{1,})$/.test(input2.text)) { var raz1 = ' '; }}
    if (!/^(\s{1,}).*$/.test(input1.text)) { var raz2 = ' '; }

    // вставляем строку в текстовое поле
    sel.text += raz1 + text + raz2;
    }

    // действия для браузера FireFox, Mozilla
    else
    {
        // разделяем исходную строку на две переменные
        // strFirst - строка ДО вставки текста
        // strEnd - строка ПОСЛЕ вставки текста
        var strFirst = str.value.substr(0, cursor);
        var strEnd   = str.value.substr(cursor, str.value.length);

        // обработка строк (удаление лишних пробелов)
        if(strFirst=='') { var raz1 = ''; var raz2 = ' '; var num = 1; }
        else
        {
        var raz1 = '';  var raz2 = ''; var num = 0;
        // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
        if (!/^.*(\s{1,})$/.test(strFirst)) { raz1 = " "; num++; }
        if (!/^(\s{1,}).*$/.test(strEnd)) { raz2 = " "; num++; }
        }
        // формируем новую строку (с вставленным текстом ПО СЕРЕДИНЕ)
        // и полученную строку вставляем в текстовое поле
        str.value = strFirst + raz1 + text + raz2 + strEnd;
        // вычисляем новое значение положения курсора
        cursor = strFirst.length + text.length + num;
        // ставим курсор в текстовое поле сразу после вставленного текста
        str.selectionStart = str.selectionEnd = cursor;
    }
}
</script>

</head>

<body onload='obj();'>

<form action='javascript:void(0)'>
Текстовое поле: <input value='' type='text' id='mess' onfocus='position();' onblur='position();' size='60' /><br />
<!-- для Opera необходимо делать <textarea id='mess'></textarea> вместо <input type='text'> -->
</form>

<a href='javascript:void(0)' onclick='InsertText("ie")'>ie</a><br />
<a href='javascript:void(0)' onclick='InsertText("opera")'>opera</a><br />
<a href='javascript:void(0)' onclick='InsertText("firefox")'>firefox</a><br />

</body>
</html>

Цитата

Кстати, ты забыл для ИЕ при потере фокуса сохранять селекцию.

вот это я не придумаю как сделать :-)

Я так понимаю надо делать duplicate(), то вот на каком событии. У меня с дупликатом получаются вообще глюки smile

Вот если бы суметь при потере фокуса сохранять селекцию в IE, то все будет GOOD.
И скрипт будет то что надо smile

Автор: Sardar 19.6.2005, 15:07

Цитата(PHP @ 19.6.2005, 13:45)

Я так понимаю надо делать duplicate(), то вот на каком событии. У меня с дупликатом получаются вообще глюки

Вот ты и сам ответил на свой вопрос smile

А если ещё и на функцию _textareaSaver здесь посмотришь: http://forum.vingrad.ru/index.php?showtopic=35775 то вопроса не будет smile

Автор: Black 19.6.2005, 15:32

Сделал так:

изменил эту функцию:

Код


function position()
{
str.focus();
 if (!document.selection) { cursor = str.selectionStart; }
 else { cursorIE = document.selection.createRange().duplicate(); }
}

а в функцию InsertText(text) добавил:

Код


 if(typeof(cursorIE)!="undefined")
    {
    var sel = cursorIE;
    }

Но если человек уберет курсор из текстового поля и затем щелкнет по ссылке запустившей функцию InsertText(text) текст добавится куда надо (на то место где был курсор до потери фокуса с текстового поля), но.... но после этого курсор становится в самое начало текстового поля, а ведь должен стать после добавленного текста... в чем глюк. Что делаю не так???

Вот полный код:

Код


<script type="text/javascript">
// Скрипт для вставки текста под курсор.
// Author: PHP-DIRECTOR <[email protected]>
// Протестировано в IE 6.0, FireFox 1.0.4, Opera 8.0, 8.01

// название текстового поля (<input type='text' id='mess' />)
// вставьте значение атрибута id текстового поля
name = 'mess';

// позиция курсора по умолчанию
cursor = 0;

// получаем текстовое поле в переменную
function obj() { str = document.getElementById(name); }

// отслеживаем позицию курсора
function position()
{
str.focus();
 if (!document.selection) { cursor = str.selectionStart; }
 else { cursorIE = document.selection.createRange().duplicate(); }
}

// вставляем текст под курсор
function InsertText(text)
{
    str.focus();

    // если это браузер Opera
    if(navigator.userAgent.indexOf('Opera')>0) { document.selection.createRange().text += ' ' + text + ' '; return true; }

    // действия для браузера IE
    if (document.selection)
    {

    // создание объектов TextRange
    var input1 = str.createTextRange();
    var input2 = input1.duplicate();
    var sel = document.selection.createRange();

    if(typeof(cursorIE)!="undefined")
    {
    var sel = cursorIE;
    }

    // эмуляция selectionStart/selectionEnd в IE
    input1.setEndPoint('StartToStart', sel);
    input2.setEndPoint('EndToStart', sel);

    // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
    var raz1=''; var raz2='';

    if(input2.text=='') { var raz1 = ''; }
    else { if (!/^.*(\s{1,})$/.test(input2.text)) { var raz1 = ' '; }}
    if (!/^(\s{1,}).*$/.test(input1.text)) { var raz2 = ' '; }

    // вставляем строку в текстовое поле
    sel.text += raz1 + text + raz2;
    }

    // действия для браузера FireFox, Mozilla
    else
    {
        // разделяем исходную строку на две переменные
        // strFirst - строка ДО вставки текста
        // strEnd - строка ПОСЛЕ вставки текста
        var strFirst = str.value.substr(0, cursor);
        var strEnd   = str.value.substr(cursor, str.value.length);

        // обработка строк (удаление лишних пробелов)
        if(strFirst=='') { var raz1 = ''; var raz2 = ' '; var num = 1; }
        else
        {
        var raz1 = '';  var raz2 = ''; var num = 0;
        // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
        if (!/^.*(\s{1,})$/.test(strFirst)) { raz1 = " "; num++; }
        if (!/^(\s{1,}).*$/.test(strEnd)) { raz2 = " "; num++; }
        }
        // формируем новую строку (с вставленным текстом ПО СЕРЕДИНЕ)
        // и полученную строку вставляем в текстовое поле
        str.value = strFirst + raz1 + text + raz2 + strEnd;
        // вычисляем новое значение положения курсора
        cursor = strFirst.length + text.length + num;
        // ставим курсор в текстовое поле сразу после вставленного текста
        str.selectionStart = str.selectionEnd = cursor;
    }
}
</script>

Автор: Black 19.6.2005, 16:52

ФИНАЛЬНАЯ ВЕРСИЯ СКРИПТА

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>.: ВСТАВКА ТЕКСТА ПОД КУРСОРОМ :.</title>

<style type='text/css'>
body { background: #c0c0c0; font-family: verdana; font-size: 13px; font-variant: small-caps; }
input { border: black solid 1px; background: wheat; padding-left: 3px; }
</style>

<script type="text/javascript">
// Скрипт для вставки текста под курсор.
// Author: PHP-DIRECTOR <[email protected]>
// Протестировано в IE 6.0, FireFox 1.0.4, Opera 8.0, 8.01

// название текстового поля (<input type='text' id='mess' />)
// вставьте значение атрибута id текстового поля
name = 'mess';

// позиция курсора по умолчанию
cursor = 0;

// получаем текстовое поле в переменную
function obj() { str = document.getElementById(name); }

// отслеживаем позицию курсора
function position()
{
str.focus();
 if (!document.selection) { cursor = str.selectionStart; }
 else { cursorIE = document.selection.createRange().duplicate(); }
}

// вставляем текст под курсор
function InsertText(text)
{
    // если это браузер Opera
    if(navigator.userAgent.indexOf('Opera')>0)
    {
        if(document.selection)
        {
            document.selection.createRange().text += ' ' + text + ' ';
            if(str.tagName.toUpperCase()=="TEXTAREA") { str.focus(); }
        }
        else { str.value += text+' '; }
    return true;
    }

    // действия для браузера IE
    if (document.selection)
    {

    // создание объектов TextRange
    var input1 = str.createTextRange();
    var input2 = input1.duplicate();

    if(typeof(cursorIE)!="undefined")
    {
    var sel = cursorIE;
    }

    // эмуляция selectionStart/selectionEnd в IE
    input1.setEndPoint('StartToStart', sel);
    input2.setEndPoint('EndToStart', sel);

    // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
    var raz1=''; var raz2='';

    if(input2.text=='') { var raz1 = ''; }
    else { if (!/^.*(\s{1,})$/.test(input2.text)) { var raz1 = ' '; }}
    if (!/^(\s{1,}).*$/.test(input1.text)) { var raz2 = ' '; }

    // вставляем строку в текстовое поле
    var text = raz1 + text + raz2;
    sel.text += text;
    
    sel.select();
    }

    // действия для браузера FireFox, Mozilla
    else if(str.setSelectionRange)
    {
        // разделяем исходную строку на две переменные
        // strFirst - строка ДО вставки текста
        // strEnd - строка ПОСЛЕ вставки текста
        var strFirst = str.value.substr(0, cursor);
        var strEnd   = str.value.substr(cursor, str.value.length);

        // обработка строк (удаление лишних пробелов)
        if(strFirst=='') { var raz1 = ''; var raz2 = ' '; var num = 1; }
        else
        {
        var raz1 = '';  var raz2 = ''; var num = 0;
        // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
        if (!/^.*(\s{1,})$/.test(strFirst)) { raz1 = " "; num++; }
        if (!/^(\s{1,}).*$/.test(strEnd)) { raz2 = " "; num++; }
        }
        // формируем новую строку (с вставленным текстом ПО СЕРЕДИНЕ)
        // и полученную строку вставляем в текстовое поле
        str.value = strFirst + raz1 + text + raz2 + strEnd;
        // вычисляем новое значение положения курсора
        cursor = strFirst.length + text.length + num;
        // ставим курсор в текстовое поле сразу после вставленного текста
        str.selectionStart = str.selectionEnd = cursor;
        // фокус
        str.focus();
    }
    else { str.value += text+' '; }
}
</script>

</head>

<body onload='obj();str.focus();'>

<div align='center'><b> .: ВСТАВКА ТЕКСТА ПОД КУРСОРОМ :. </b></div>
<br />

<form action='javascript:void(0)'>
Текстовое поле: <input value='' type='text' id='mess' onchange='position();' onclick='position();' onkeyup='position();' onfocus='position();' size='60' /><br />
<!-- для Opera необходимо делать <textarea id='mess'></textarea> вместо <input type='text'> -->
</form>

<a href='javascript:void(0)' onclick='InsertText("ie")'>ie</a><br />
<a href='javascript:void(0)' onclick='InsertText("opera")'>opera</a><br />
<a href='javascript:void(0)' onclick='InsertText("firefox")'>firefox</a><br />

<div align='center'>Как пользоваться скриптом:</div>

<ol type='1' start='1'>
    <li> Скопируйте текст скрипта (<b>&lt;script&gt;...&lt;/script&gt;</b>) и вставьте его между <b>&lt;head&gt;&lt;/head&gt;</b> вашей страницы.</li>
    <li> Тегу <b>&lt;body&gt;</b> в обработчик события <b>onload</b> добавьте: <b>obj();str.focus();</b></li>
    <li> Создайте на вашей странице текстовое поле. Например: <b>&lt;input type='text' /&gt;</b></li>
    <li> Для текстового поля укажите id и добавьте четыре обработчика событий. То есть так:<br />
    <b>&lt;input type='text' id='mess' onchange='position();' onclick='position();' onkeyup='position();' onfocus='position();' /&gt;</b></li>
    <li> Вставьте в переменную <b>name</b> (в скрипте) значение атрибута <b>id</b> вашего текстового поля куда должен вставляться текст под курсор.<br />
    По умолчанию <b>id='mess'</b> можете ничего не менять (если id не будет конфликтовать с другими элементами вашей страницы).</li>
    <li> Чтобы вставить определенный текст в текстовое поле вы должны создать ссылки следующего вида:<br />
    <b>&lt;a href='javascript:void(0)' onclick='InsertText("вставляемый текст")'&gt;текст ссылки&lt;/a&gt;</b></li>
    <li> Вот и все. Пользуйтесь :-) Работает в IE 6.0, Firefox 1.0.4, Opera 8.0, 8.01. В старых версиях браузеров текст дописывается в конец текстового поля.</li>
</ol>

<div align='center'>Author: <b><a href='http://forum.vingrad.ru/index.php?showuser=777&amp;nickname=PHP-DIRECTOR'>PHP-DIRECTOR</a></b> &lt;19 июня 2005 год&gt;</div>

</body>
</html>

P.S: добавлена поддержка старых версий браузеров.
Оптимизированна работа в браузере IE.
Улучшена поддержка браузера Opera.
Исправлены мелкие ошибки и недочеты smile

Благодарю Sardarа за замечания.

Автор: Sardar 19.6.2005, 17:50

Цитата

// ВНИМАНИЕ: если текст добавляется в <textarea></textarea>, то раскомментируйте следующую строку

Замени на: if(str.tagName.toUpperCase()=="TEXTAREA") str.focus();

Автор: Гость_Гость 29.8.2005, 09:28

Огромное спасибо за замечательный скрипт! Все копирайты оставил.

Автор: Wolf1994 9.4.2006, 00:26

Слегка усовершенствовал скрипт под свои нужды. По-моему, стало чуть удобнее:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>.: ВСТАВКА ТЕКСТА ПОД КУРСОРОМ :.</title>

<style type='text/css'>
body { background: #c0c0c0; font-family: verdana; font-size: 13px; font-variant: small-caps; }
input { border: black solid 1px; background: wheat; padding-left: 3px; }
</style>

<script type="text/javascript">
// Скрипт для вставки текста под курсор.
// Author: PHP-DIRECTOR <[email protected]>
// Протестировано в IE 6.0, FireFox 1.0.4, Opera 8.0, 8.01

// позиция курсора по умолчанию
cursor = 0;

// получаем текстовое поле в переменную
function obj(name) { str = document.getElementById(name); }

// отслеживаем позицию курсора
function position(name)
{
obj(name);
str.focus();
 if (!document.selection) { cursor = str.selectionStart; }
 else { cursorIE = document.selection.createRange().duplicate(); }
}

// вставляем текст под курсор
function InsertText(text)
{
 if (typeof(str)!="undefined") {
    // если это браузер Opera
    if(navigator.userAgent.indexOf('Opera')>0)
    {
        if(document.selection)
        {
            document.selection.createRange().text += ' ' + text + ' ';
            if(str.tagName.toUpperCase()=="TEXTAREA") { str.focus(); }
        }
        else { str.value += text+' '; }
    return true;
    }

    // действия для браузера IE
    if (document.selection)
    {

    // создание объектов TextRange
    var input1 = str.createTextRange();
    var input2 = input1.duplicate();

    if(typeof(cursorIE)!="undefined")
    {
    var sel = cursorIE;
    }

    // эмуляция selectionStart/selectionEnd в IE
    input1.setEndPoint('StartToStart', sel);
    input2.setEndPoint('EndToStart', sel);

    // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
    var raz1=''; var raz2='';

    if(input2.text=='') { var raz1 = ''; }
    else { if (!/^.*(\s{1,})$/.test(input2.text)) { var raz1 = ' '; }}
    if (!/^(\s{1,}).*$/.test(input1.text)) { var raz2 = ' '; }

    // вставляем строку в текстовое поле
    var text = raz1 + text + raz2;
    sel.text += text;
    
    sel.select();
    }

    // действия для браузера FireFox, Mozilla
    else if(str.setSelectionRange)
    {
        // разделяем исходную строку на две переменные
        // strFirst - строка ДО вставки текста
        // strEnd - строка ПОСЛЕ вставки текста
        var strFirst = str.value.substr(0, cursor);
        var strEnd   = str.value.substr(cursor, str.value.length);

        // обработка строк (удаление лишних пробелов)
        if(strFirst=='') { var raz1 = ''; var raz2 = ' '; var num = 1; }
        else
        {
        var raz1 = '';  var raz2 = ''; var num = 0;
        // проверяем есть ли на стыке границ строк пробелы, если нет, то сами их добавим
        if (!/^.*(\s{1,})$/.test(strFirst)) { raz1 = " "; num++; }
        if (!/^(\s{1,}).*$/.test(strEnd)) { raz2 = " "; num++; }
        }
        // формируем новую строку (с вставленным текстом ПО СЕРЕДИНЕ)
        // и полученную строку вставляем в текстовое поле
        str.value = strFirst + raz1 + text + raz2 + strEnd;
        // вычисляем новое значение положения курсора
        cursor = strFirst.length + text.length + num;
        // ставим курсор в текстовое поле сразу после вставленного текста
        str.selectionStart = str.selectionEnd = cursor;
        // фокус
        str.focus();
    }
    else { str.value += text+' '; }
 }
}
</script>

</head>

<body>

<div align='center'><b> .: ВСТАВКА ТЕКСТА ПОД КУРСОРОМ :. </b></div>
<br />

<form action='javascript:void(0)'>
Текстовые поля:
<br />
<input value='' type='text' id='mess' onchange='position(this.id);' onclick='position(this.id);' onkeyup='position(this.id);' onfocus='position(this.id);' size='60' /><br />
<input value='' type='text' id='mess2' onchange='position(this.id);' onclick='position(this.id);' onkeyup='position(this.id);' onfocus='position(this.id);' size='60' /><br />
<!-- для Opera необходимо делать <textarea id='mess'></textarea> вместо <input type='text'> -->
</form>

<a href='javascript:void(0)' onclick='InsertText("ie")'>ie</a><br />
<a href='javascript:void(0)' onclick='InsertText("opera")'>opera</a><br />
<a href='javascript:void(0)' onclick='InsertText("firefox")'>firefox</a><br />

<div align='center'>Как пользоваться скриптом:</div>

<ol type='1' start='1'>
    <li> Скопируйте текст скрипта (<b>&lt;script&gt;...&lt;/script&gt;</b>) и вставьте его между <b>&lt;head&gt;&lt;/head&gt;</b> вашей страницы.</li>
    <li> Тегу <b>&lt;body&gt;</b> в обработчик события <b>onload</b> добавьте: <b>obj();str.focus();</b></li>
    <li> Создайте на вашей странице текстовое поле. Например: <b>&lt;input type='text' /&gt;</b></li>
    <li> Для текстового поля укажите id и добавьте четыре обработчика событий. То есть так:<br />
    <b>&lt;input type='text' id='mess' onchange='position();' onclick='position();' onkeyup='position();' onfocus='position();' /&gt;</b></li>
    <li> Вставьте в переменную <b>name</b> (в скрипте) значение атрибута <b>id</b> вашего текстового поля куда должен вставляться текст под курсор.<br />
    По умолчанию <b>id='mess'</b> можете ничего не менять (если id не будет конфликтовать с другими элементами вашей страницы).</li>
    <li> Чтобы вставить определенный текст в текстовое поле вы должны создать ссылки следующего вида:<br />
    <b>&lt;a href='javascript:void(0)' onclick='InsertText("вставляемый текст")'&gt;текст ссылки&lt;/a&gt;</b></li>
    <li> Вот и все. Пользуйтесь :-) Работает в IE 6.0, Firefox 1.0.4, Opera 8.0, 8.01. В старых версиях браузеров текст дописывается в конец текстового поля.</li>
</ol>

<div align='center'>Author: <b><a href='http://forum.vingrad.ru/index.php?showuser=777&amp;nickname=PHP-DIRECTOR'>PHP-DIRECTOR</a></b> &lt;19 июня 2005 год&gt;</div>

</body>
</html>

Изменил здесь:
function position(name)
{
obj(name);
Здесь: position(this.id);
И здесь:
function InsertText(text)
{
if (typeof(str)!="undefined") {

Убрал это:
onload='obj();str.focus();'
И это:
name = 'mess';

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

PS. Извините, если сделал элементарную вещь и отнимаю ваше время, но когда-то понять скрипт такого уровня для меня было недостижимо и я очень горд, что чему-то за это время научился и не могу не поделится smile

Автор: Wolf1994 9.4.2006, 02:37

Пожалуйста объясните, почему этот кусок кода вызывает глюки в IE (только в IE), при использовании textarea вместо input:

Код


    // эмуляция selectionStart/selectionEnd в IE
    input1.setEndPoint('StartToStart', sel);
    input2.setEndPoint('EndToStart', sel);

Ошибка: "Недопустимый аргумент".

Для чего вообще нужен этот фрагмент?
smile

Автор: Ciber SLasH 9.4.2006, 02:55

Wolf1994, а ты удали эти строчки и тогда ошибки не будет. smile

Автор: Wolf1994 9.4.2006, 04:32

Удалить-то я их удалил, но хочется понять - для чего это нужно? smile

Автор: Wolf1994 9.4.2006, 05:30

Всё, разобрался. Эти функции создают две разбитых строки, чтобы для каждой из них определить - есть ли на концах пробелы. Мне обработка пробелов не нужна. Поэтому это тоже вырезаю:

Код


//    if(input2.text=='') { var raz1 = ''; }
//    else { if (!/^.*(\s{1,})$/.test(input2.text)) { var raz1 = ' '; }}
//    if (!/^(\s{1,}).*$/.test(input1.text)) { var raz2 = ' '; }

Ещё один вопрос. Даже два.

1) Если в строку добавить символ возврата каретки "\n" - то будет ли он игнорироваться при вставке в "input"?

2) Как сделать определение - есть ли внутри вставляемого аргумента эти символы и отпозиционировать курсор после первого такого символа? То есть:
[myquote]\nКУРСОР ЗДЕСЬ\n[/myquote]
Если кто знает, то подскажите пожалуйста решения для всех браузеров! )))
Добавлено @ 05:39

Цитата

Как сделать определение - есть ли внутри вставляемого аргумента эти символы

Нашёл:

Код


if (text.indexOf("\n")!=-1) {alert('ok');}

Последнее:

Цитата

1) Если в строку добавить символ возврата каретки "\n" - то будет ли он игнорироваться при вставке в "input"?

2) ...отпозиционировать курсор после первого такого символа? То есть:
[myquote]\nКУРСОР ЗДЕСЬ\n[/myquote]
Если кто знает, то подскажите пожалуйста решения для всех браузеров! )))

Автор: Wolf1994 9.4.2006, 08:01

2) под FireFox:

Код


        if (text.indexOf("\n\n")!=-1)
        {
         cursor = strFirst.length + text.substr(0, text.indexOf("\n\n")).length+1;
        }
        else
        {
         cursor = strFirst.length + text.length;
        }

Автор: Ciber SLasH 9.4.2006, 13:08

Цитата(Wolf1994 @ 9.4.2006, 06:30

)

1) Если в строку добавить символ возврата каретки "\n" - то будет ли он игнорироваться при вставке в "input"?

Будет.
Вот ещё один скрипт вставки текста под курсором:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<title>JavaScript :: Вставка текста в позицию курсора</title>
<script type='text/javascript' src='file:///I|/Failo/Progi/Scripts/JavaScript/%23 Includes/func_ObjectTools.js'></script>
<script type='text/javascript'>
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;
}

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();
    } else alert(text_no_selected);
}

function emoticon(text) {
text = ' ' +text+ ' ';
insert_into_position_cursor(text);
}

function storeCaret(textEl) {
    if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}
</script>
</head>

<body>
<form method="post" name="post">
<table border="1">
<tr><td colspan="2" align="center"><b>!!!!Выдели меня!!!!</b></td></tr>
<tr>
    <td width="135">
        <table 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></td></tr></table></td></tr>
        </table>
    </td>
    <td><textarea name="message" rows="15" cols="50" wrap="virtual" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea></td>
</tr>
</table>
</form>
</body>
</html>

Автор: Wolf1994 9.4.2006, 16:59

Ciber SLasH, спасибо.

Жаль, что у меня так и не получилось найти решения с первым примером, для Opera и IE. Пожалуйста, подскажите как в этих браузерах управлять положением курсора.
smile

Просмотрел исходники этого форума, но так и не понял, как тут это реализовано smile

Автор: Pena 20.4.2006, 00:37

Несколько "не в тему", но не хочется засорять forum "новой темой" - мой вопрос не заслужевает этого smile

Код



<script>

function italic()  {
  obj_ta=document.Form.aText;
  obj_ta.focus();
  var sel=document.selection;
  var rng=sel.createRange();
  rng.colapse;
  var Enter="<b>"+rng.text+"</b>";
  rng.text=Enter;
 }

</script>

<form name="Form">

<div onselectstart="return false" onClick="italic()" style="font-weight: 600; cursor: hand;"> Ж </div>

<input  type="Text" name="aText" size="15" value=" Раз"> <br>
<input  type="Text" name="bText" size="15" value=" Два">

</form>

- Нужно чтобы 1) текст вставлялся не только в строку "aText", а в ту где находится курсор 2) выделенный в строке текст с обеих сторон "обставлялся" (без использования button) - хотя и прописано в коде, ан только с buttonom работает(
З.Ы. Для вас семечки, а мне польза - не пойму по всем вашим росписям (см. выше) что к чему smile

Автор: Wolf1994 20.4.2006, 19:01

Pena, вот финальный вариант моей модификации, который делает то, что Вам нужно:

Код


<script type="text/javascript">
// Скрипт для вставки текста под курсор.
// Author: PHP-DIRECTOR <[email protected]>
// Протестировано в IE 6.0, FireFox 1.0.4, Opera 8.0, 8.01

// позиция курсора по умолчанию
cursor = 0;

// отслеживаем позицию курсора
function position(name)
{
str = document.getElementById(name);
str.focus();
 if (!document.selection) { cursor = str.selectionStart; }
 else { cursorIE = document.selection.createRange().duplicate(); }
}

// вставляем текст под курсор
function InsertText(text)
{
 if (typeof(str)!="undefined") {
    // если это браузер Opera
    if(navigator.userAgent.indexOf('Opera')>0)
    {
        if(document.selection)
        {
            document.selection.createRange().text += text;
            if(str.tagName.toUpperCase()=="TEXTAREA") { str.focus(); }
        }
        else { str.value += text; }
    return true;
    }


    // действия для браузера IE
    if (document.selection)
    {

    // создание объектов TextRange
    var input1 = str.createTextRange();

    if(typeof(cursorIE)!="undefined")
    {
    var sel = cursorIE;
    }


    // вставляем строку в текстовое поле
    sel.text += text;

    if (text.indexOf("\n\n")!=-1)
    {
    }
    else
    {
    }

    sel.select();
    }

    // действия для браузера FireFox, Mozilla
    else if(str.setSelectionRange)
    {
        // разделяем исходную строку на две переменные
        // strFirst - строка ДО вставки текста
        // strEnd - строка ПОСЛЕ вставки текста
        var strFirst = str.value.substr(0, cursor);
        var strEnd   = str.value.substr(cursor, str.value.length);

        // формируем новую строку (с вставленным текстом ПО СЕРЕДИНЕ)
        // и полученную строку вставляем в текстовое поле
        str.value = strFirst + text + strEnd;
        // вычисляем новое значение положения курсора
        if (text.indexOf("\n\n")!=-1)
        {
         cursor = strFirst.length + text.substr(0, text.indexOf("\n\n")).length+1;
        }
        else
        {
         cursor = strFirst.length + text.length;
        }
        // ставим курсор в текстовое поле сразу после вставленного текста
        str.selectionStart = str.selectionEnd = cursor;
        // фокус
        str.focus();
    }
    else { str.value += text+' '; }
 }
}
</script>

В input или textarea вставляем это:
onchange="position(this.id);" onclick="position(this.id);" onkeyup="position(this.id);" onfocus="position(this.id);" id="anyid"

И, ставим, например такую ссылку:
<a href='javascript:void(0)' onclick='InsertText("[MyQUOTE]\n\n[/MyQUOTE]")'>Цитата</a>

Цитата(Wolf1994 @ 9.4.2006, 16:59

)

Жаль, что у меня так и не получилось найти решения с первым примером, для Opera и IE. Пожалуйста, подскажите как в этих браузерах управлять положением курсора.

Автор: Pena 21.4.2006, 00:47

Э-э-эм... вторая строка вообще отказывается выделятся, и не происходит "обёртки" =(

Автор: Ciber SLasH 21.4.2006, 01:19

Wolf1994, Pena, а чем вам не нравится скрипт Sardar-а: http://forum.vingrad.ru/index.php?showtopic=35775

В качестве демонстрации его скрпта:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<script type='text/javascript'>
/**
* Обьект через который мы и будем работать с текстовыми полями.
* Содержит все необходимые поля, легко расширяем по вкусу =)
* @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;}
}
////////////////////////////////////////////////////////////////////////////////
onload = function () {
text = new TextAreaSelectionHelper(document.getElementById("textarea"));
}
</script>
</head>

<body>
<textarea id="textarea" cols="80" rows="20">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;</textarea><br>
<a href='javascript: text.setSelectedText("[test]", "[/test]")'>Обрамить выделенные текст в [test][/test]</a><br>
<a href='javascript: text.setSelectedText("[censored]")'>Обрамить выделенный текст в [censored]</a><br>
<a href='javascript: text.setSelectedText(" :) ")'>Вставить текст " :) " в позицию курсора</a><br>
</body>
</html>

Автор: Pena 21.4.2006, 13:13

В данном виде он не выполняет первое условие: "текст вставлялся не только в строку "aText", а в ту где находится курсор" =(
З.Ы. Но выполняет второе - и за то спасибо)
З.Ы.Ы. Вот бы доработать smile

Автор: rcdimon 5.5.2006, 07:01

Цитата

// эмуляция selectionStart/selectionEnd в IE
input1.setEndPoint('StartToStart', sel);
input2.setEndPoint('EndToStart', sel);

На что IE благополучно отвечает:

Цитата

Недопустимый аргумент

Почему?