VPF::Вставка текста под курсором - 2

Black

Дата 18.6.2005, 02:46 (ссылка)

(нет голосов)

Загрузка ...

Web-Development

Профиль
Группа: Участник
Сообщений: 980
Регистрация: 15.8.2004

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

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

Код


<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

Это сообщение отредактировал(а) PHP-DIRECTOR - 19.6.2005, 17:03

--------------------

Могу все, но ничего не умею :-)

Sardar

Дата 18.6.2005, 21:31 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

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

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

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

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

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

sergejzr

Дата 18.6.2005, 21:36 (ссылка)

(нет голосов)

Загрузка ...

Un salsero
Group Icon

Профиль
Группа: Админ
Сообщений: 13285
Регистрация: 10.2.2004
Где: Германия г .Ганновер

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

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

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

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

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

--------------------

Me.
FB.
LinkedIn.
ORCID.
YT.

Black

Дата 19.6.2005, 00:23 (ссылка)

(нет голосов)

Загрузка ...

Web-Development

Профиль
Группа: Участник
Сообщений: 980
Регистрация: 15.8.2004

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

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

Это сообщение отредактировал(а) PHP-DIRECTOR - 19.6.2005, 00:25

--------------------

Могу все, но ничего не умею :-)

Black

Дата 19.6.2005, 14:45 (ссылка)

(нет голосов)

Загрузка ...

Web-Development

Профиль
Группа: Участник
Сообщений: 980
Регистрация: 15.8.2004

Репутация: 2
Всего: 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 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

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

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

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

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

--------------------

Black

Дата 19.6.2005, 15:32 (ссылка)

(нет голосов)

Загрузка ...

Web-Development

Профиль
Группа: Участник
Сообщений: 980
Регистрация: 15.8.2004

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

Сделал так:

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

Код


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>

Это сообщение отредактировал(а) PHP-DIRECTOR - 19.6.2005, 15:33

--------------------

Могу все, но ничего не умею :-)

Black

Дата 19.6.2005, 16:52 (ссылка)

(нет голосов)

Загрузка ...

Web-Development

Профиль
Группа: Участник
Сообщений: 980
Регистрация: 15.8.2004

Репутация: 2
Всего: 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()
{
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а за замечания.

Это сообщение отредактировал(а) PHP-DIRECTOR - 19.6.2005, 20:19

--------------------

Могу все, но ничего не умею :-)

Sardar

Дата 19.6.2005, 17:50 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317

Цитата

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

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

--------------------

Гость_Гость

Дата 29.8.2005, 09:28 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

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

Wolf1994

Дата 9.4.2006, 00:26 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

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

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

Код


<!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, 00:36

Wolf1994

Дата 9.4.2006, 02:37 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

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

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

Код


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

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

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

Ciber SLasH

Дата 9.4.2006, 02:55 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

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

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

Wolf1994

Дата 9.4.2006, 04:32 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

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

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

Wolf1994

Дата 9.4.2006, 05:30 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

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

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

Код


//    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, 05:43

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »