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

Wolf1994

Дата 9.4.2006, 08:01 (ссылка)

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

Загрузка ...

Эксперт

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

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

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 (ссылка)

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

Загрузка ...

Эксперт

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

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

Цитата(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 (ссылка)

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

Загрузка ...

Эксперт

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

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

Ciber SLasH, спасибо.

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

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

Pena

Дата 20.4.2006, 00:37 (ссылка)

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

Загрузка ...

КорнеплодЪ

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 20.4.2006
Где: эРэФия, аул Москв а...

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

Несколько "не в тему", но не хочется засорять 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 (ссылка)

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

Загрузка ...

Эксперт

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

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

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. Пожалуйста, подскажите как в этих браузерах управлять положением курсора.

Это сообщение отредактировал(а) Wolf1994 - 20.4.2006, 19:02

Pena

Дата 21.4.2006, 00:47 (ссылка)

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

Загрузка ...

КорнеплодЪ

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 20.4.2006
Где: эРэФия, аул Москв а...

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

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

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

Самовар по всем вопросам - сильно не ругайте

Ciber SLasH

Дата 21.4.2006, 01:19 (ссылка)

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

Загрузка ...

Эксперт

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

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

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 (ссылка)

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

Загрузка ...

КорнеплодЪ

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 20.4.2006
Где: эРэФия, аул Москв а...

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

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

Это сообщение отредактировал(а) Pena - 21.4.2006, 13:16

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

Самовар по всем вопросам - сильно не ругайте

rcdimon

Дата 5.5.2006, 07:01 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата

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

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

Цитата

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

Почему?

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