VPF::Как вставить текст под курсором

3,14

Дата 11.4.2006, 17:46 (ссылка)

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

Загрузка ...

Эксперт

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

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

У меня не работает в IE (пишет object doesn't support this property or method), если выделение текста в textarea сделать двойным кликом.
IE Version: 6.0.2900.2180.xpsp_sp2_gdr.050301-1519

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

Может быть, это только мой бред,
Может быть, жизнь не так хороша,
Может быть, я не выйду на свет,
Но я летал, когда пела душа...

SANCHOS

Дата 19.5.2006, 18:51 (ссылка)

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

Загрузка ...

Новичок

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

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

А чем вам не нравится более простой вариант для этого действия?

Код


<html>
<head>
<style>
a {text-decoration: underline; color: #0000FF; font-size: 14pt;}
</style>
</head>
<body>
<form name="form">
<INPUT TYPE="text" NAME="tb">
</form>
<a onclick="document.form.tb.value += 'text1' ">text1</a>
<a onclick="document.form.tb.value += 'text2' ">text2</a>
<a onclick="document.form.tb.value += 'text3' ">text3</a>
</body>
</html>

text1,tex2,text3 можно заменять чем угодно.

godsgame

Дата 3.9.2006, 17:32 (ссылка)

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

Загрузка ...

Бывалый

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

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

ммм.. потратил много времени пытаясь подключить эти ф-ции... Сначала получал ошибку Object not defined/expected или что-то в этом роде... потом решил для начала просто подключить файл..

Получил ошибку: Syntax Error on line 94

подключаю так:

Код


<script LANGUAGE="JavaScript" src='myjs.js'></SCRIPT>

файл:

Код


/**
* Обьект через который мы и будем работать с текстовыми полями.
* Содержит все необходимые поля, легко расширяем по вкусу =)
* @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("myText"));}

function test() {
 text.setSelectedText("[test]","[/test]");
// text.setSelectedText("[test]");
}

Я даже закоментил ОНЛОАД... но и это не помогло.
Помогите пожалуйста разобраться... ЧЯто-то мне подсказывает что у меня руки кривые.

godsgame

Дата 3.9.2006, 17:51 (ссылка)

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

Загрузка ...

Бывалый

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

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

нашел ответ тут:

Код


http://forum.vingrad.ru/index.php?showtopic=55935&st=15

спасибо Ciber SLasH !

GZep

Дата 11.2.2007, 21:55 (ссылка)

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

Загрузка ...

участник Винграда

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

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

Sardar, ваш вариант немного не верен...

Вот кусок вашего кода:

Код


  if(document.selection) {//84 строка

Тогда как вместо него надо:

Код


    if (document.selection && document.selection.createRange) {//IE 4.0 (win32) & Opera >= 8.0

Все дело в том, что mac версия ИЕ поддерживает document.selection, но не поддерживает document.selection.createRange smile

.
Вот так вот. smile

Теперь попрошу кого-нибудь помочь мне со своим кодом: (пример Sardar'a мне не подходит)
Собственно, что не работает:
Все прекрасно работает кроме изменения позиции курсора в ИЕ(у меня стоит 7-я финальная версия)...
С остальными браузерами все просто отлично. smile

Вот код(прямо копируйте и вставляйте в файл для запуска, форма, кнопки и т.д. уже имеются):

Код


<script language="JavaScript" type="text/javascript">
<!--
function InsertTag(id, open, close) {
    var target = document.getElementById(id);
    if (!window.opera)//Даем фокус, если браузер не Opera
        target.focus();
    if (typeof(cursor) != "undefined") {//IE 4.0 (win32) & Opera 8.0
        //alert("IE & Opera");
        //Определяем, есть ли выделение(нам это надо сделать еще до кода встаки тега, иначе будет всегда true
        var haveSel = cursor.text.length ? true : false;
        //Если имеется выделенный участок строки - ставим курсор в конец
        //Иначе - между тегами
        
        //Собственное обводим выделенное тегами
        cursor.text = open + cursor.text + close;
        
        //Работаем с позицией курсора:
        
        if (haveSel) {//Ставим курсор в конец
            cursor.collapse(true);               
        } else {//Ставим курсор между тегами
            //Это тут я нахимичить пытался, вроде все правильно делал, но все-равно ничего не вышло
            //cursor.moveEnd("character", -close.length);
            //cursor.moveStart("character", -target.value.length);
            //cursor.move("character", -4);//target.value.length);            
        }
        cursor.select();//Честно говоря не совсем понимаю зачем эта строчка :)
    }
function PositionSaver(target) {
    if (document.selection && document.selection.createRange) {//IE 4.0 (win32) & Opera 8.0
        cursor = document.selection.createRange().duplicate();
        //cursor = target.createTextRange().duplicate();
        return;
    }
}
// -->
</script>
<form>
    <textarea
        onselect='PositionSaver(this);'
        onclick='PositionSaver(this);'
        onkeyup='PositionSaver(this);'
        onfocus='PositionSaver(this);'
        id="area"
        cols="100"
        rows="20">
    </textarea>
</form>
<a href="javascript:InsertTag('area', '', '');">[b]</a><br />
<a href="javascript:InsertTag('area', '[i]', '[/i]');">[i]</a>

Помогите пожалуйста! Не знаю, почему этот ие не хочет никак курсор двигать, ни в какую... smile

Это сообщение отредактировал(а) GZep - 11.2.2007, 21:56

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

Sardar

Дата 12.2.2007, 00:28 (ссылка)

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

Загрузка ...

Бегун

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

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

Цитата(GZep @ 11.2.2007, 20:55

)

Sardar, ваш вариант немного не верен...

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

Коллапсировать селекцию это прировнять начало к концу или конец к началу, смотря какое направление. Следовательно если передвинуть конец и сколлапсировать селекцию, то передвинем курсор куда нужно. В твоём случае двигаем только если текста в селекции не было, следовательно достаточно только cursor.moveEnd("character", -close.length);.

Цитата(GZep @ 11.2.2007, 20:55

)

cursor.select();//Честно говоря не совсем понимаю зачем эта строчка smile

На одном поле может быть масса селекций, это такие хендлеры по тексту, помогающие изменять его в некотором месте. Селекция на экране это нечто другое, она обычно одна. Вызовом .select() мы переносим селекцию на экране под конкретную селекцию в скрипте. Короче что бы курсор реально передвинулся smile

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

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

GZep

Дата 12.2.2007, 16:25 (ссылка)

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

Загрузка ...

участник Винграда

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

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

Цитата(Sardar @ 12.2.2007, 00:28

)

только cursor.moveEnd

А cursor.moveStart в моем случае можно не вставлять? Это потому что отсутствует выделение, а имеется только позиция курсора?

А как тогда поставить курсор в ие в самый конец строки? Не выделенной части а всей строки целиком... smile

Цитата(Sardar @ 12.2.2007, 00:28

)

Вызовом .select() мы переносим селекцию на экране под конкретную селекцию в скрипте

Эта такая особенность в ие?

А вот еще проблема появилась:

Код


//кусок кода
        alert(cursor.text.length);//выводит количество выделенных символов
        cursor.text = open + cursor.text + close;
        alert(cursor.text.length);//всегда почему-то выводит "0"

Почему так?

Это сообщение отредактировал(а) GZep - 12.2.2007, 17:26

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

Sardar

Дата 12.2.2007, 17:54 (ссылка)

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

Загрузка ...

Бегун

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

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

Цитата(GZep @ 12.2.2007, 15:25

)

А cursor.moveStart в моем случае можно не вставлять? Это потому что отсутствует выделение, а имеется только позиция курсора?

Если не нужно ставить курсор, то не нужно, но тогда и .select() убери. "Курсор" == селекция с нулевой длинной.

Цитата(GZep @ 12.2.2007, 15:25

)

А как тогда поставить курсор в ие в самый конец строки? Не выделенной части а всей строки целиком...

Читай абзац выше. Отселектировать всё что нужно, сколлапсировать в начало или в конец. Можно и move(End|Start) использовать. Только не забудь .select() на конце, что бы реальная селекция на экране изменилась.

Цитата(GZep @ 12.2.2007, 15:25

)

Эта такая особенность в ие?

Нет, это спецификация selection.

Цитата(GZep @ 12.2.2007, 15:25

)

Почему так?

Потому что после установки текста селекция всегда коллапсируется. Сделай с неё дубликат, он по моему не должен изменяться. Хотя у ИЕ с дубликатами глюки есть, можно двигать концы одной селекции, а дубликат "магическим способом" тоже будет изменяться. Больше на эту тему в основном разделе о indent'aх в питоне, фича к форумскому полю ответа по ctrl+[].

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

GZep

Дата 12.2.2007, 20:11 (ссылка)

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

Загрузка ...

участник Винграда

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

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

Цитата(Sardar @ 12.2.2007, 17:54

)

Можно и move(End|Start)

Вот я как раз это и применял, только толку без .select() не было. Вот в этом, наверное, и была вся проблема.

Цитата(Sardar @ 12.2.2007, 17:54

)

спецификация selection.

Вот я там был smile

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

Цитата(Sardar @ 12.2.2007, 17:54

)

Спасибо, буду копать, думаю, скоро разберусь и выложу тут как сделать.

Sardar, Даже не знаю, что сказать. Такая помощь! Да чтобы я без Вас делал! smile

Да, наверное позже выложу свой универсальный вариант, который, думаю, многим понравиться.

Это сообщение отредактировал(а) GZep - 12.2.2007, 20:13

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

GZep

Дата 13.2.2007, 15:11 (ссылка)

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

Загрузка ...

участник Винграда

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

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

Цитата(Sardar @ 12.2.2007, 17:54

)

Можно и move(End|Start) использовать

Sardar, помогите, пожалуйста, не работает.
Вот пример использования:
[только_что_вставленный_тег][текст][/только_что_вставленный_тег][курсор] - все правильно, мне так и надо!
[только_что_вставленный_тег][текст][/только_что_вставленный_тег][курсор][предыдущий_тег][текст][/предыдущий_тег] - нет, мне надо, чтобы курсор в самом конце стоял!

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

Вот что нахимичил...:

Код


        if (haveSel) {//"Сварачиваем" выделение и ставим курсор в конец
            //cursor.collapse(true);
            //alert("haveSel");
            //cursor.expand("textedit");
            cursor.setEndPoint("EndToEnd", cursor);
            //alert(cursor.compareEndPoints("EndToEnd", target));
            //cursor.move("character", end);
            cursor.move("textedit", end);
        //move(End|Start)
        //move("character",0)
        }
        cursor.select();

Это только кусок, естественно, кода.

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

Sardar

Дата 14.2.2007, 17:21 (ссылка)

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

Загрузка ...

Бегун

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

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

Не знаю зачем ставить курсор всегда в конец поля, но можно просто отселектировать всё содержимое и коллапсировать селекцию в конец.
Обернуть поле в селекцию можно методом .moveToElementText.

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

GZep

Дата 17.2.2007, 21:34 (ссылка)

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

Загрузка ...

участник Винграда

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

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

Вот так, вроде, должно работать, но опять smile

Код


    if (typeof(cursor) != "undefined") {//IE 4.0 (win32) & Opera 8.0
            cursor.text = open + cursor.text + close;//Обводим выделенное тегами
            //Работаем с позицией курсора:
            //cursor.collapse(true);
            //cursor.expand("textedit");
            //cursor.setEndPoint("EndToEnd", cursor);
            //alert(cursor.compareEndPoints("EndToEnd", target));
            cursor.moveToElementText(target);
            //cursor.moveEnd("character", -close.length);
            cursor.move("character", end);//"Сварачиваем" выделение и ставим курсор в конец
            //cursor.move("textedit", end);
            //move(End|Start)//move("character",0)
        cursor.select();//Переносим селекцию
        return;//Завершаем работу функции.
    }

Просто на самом деле уже интересно: получится так сделать или нет. smile

Sardar, посмотрите, пожалуйста, что там не так?

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

Sardar

Дата 17.2.2007, 22:28 (ссылка)

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

Загрузка ...

Бегун

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

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

Цитата(GZep @ 17.2.2007, 20:34

)

cursor.move("character", end);//"Сварачиваем" выделение и ставим курсор в конец

Это вообще откуда? Как end вычислил? И вообще зачем, если ты уже отселектировал всё. Я сказал коллапсировать, т.е. .collapse(true)

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

GZep

Дата 18.2.2007, 12:21 (ссылка)

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

Загрузка ...

участник Винграда

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

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

Sardar, спасибо, получилось smile

Описание кода:

Если имеется выделенный участок, то он обводится тегами, а курсор ставиться в самый конец, для дальнейшего набора текста.
Если браузер не поддерживает выделение, то в конец добавляется один "открывающий" тег или парный ему "закрывающий", если уже есть "открывающий" тег.
Прадусматривается mac версия ИЕ, где не поддерживается объект document.selection.createRange
Предусматривается отмена передачи фокуса если браузер - Opera
Поддержка нескольких форм ввода

Вот код. Форма воода имеется, можно прямо сохранять и тестить. О багах пишите в эту тему.

Код


<script language="JavaScript" type="text/javascript">
<!--
InsertTag_tags = new Array();//Массив, необходимый для стрых браузеров, которые не поддерживают выделение
function InsertTag(id, open, close) {
    var target = document.getElementById(id);
    if (!window.opera)//Даем фокус, если браузер не Opera
        target.focus();
    if (typeof(cursor) != "undefined") {//IE 4.0 (win32) & Opera 8.0
        //alert("IE & Opera");
        if (cursor.text.length) {//Если имеется выделение
            cursor.text = open + cursor.text + close;//Обводим выделенное тегами
            cursor.moveToElementText(target);//Расширяем облость селекции на всё поле ввода
            cursor.collapse(false);//"Сварачиваем" выделение в курсор и ставим его в конец
        } else {//Если имеется курсор без выделенного участка строки
            cursor.text = open + close;//Вставляем теги на место курсора
            cursor.moveEnd("character", -close.length);//Ставим курсор между тегами
        }
        cursor.select();//Переносим селекцию
        return;//Завершаем работу функции.
    }
    if (typeof(cursorStart) != "undefined") {//Gecko
        var start = target.value.substring(0, cursorStart),//Получаем строку, находящуюся до выделения
            selected = target.value.substring(cursorStart, cursorEnd),//Получаем выделенную строку (или пустую строку, если ничего не выделено)
            end = target.value.substr(cursorEnd);//Получаем строку, находящуюся после выделения
        target.value = start + open + selected + close + end;//Изменяем значение объекта
        target.selectionStart = target.selectionEnd = selected.length ? target.value.length : start.length + open.length;//Устанавливаем позицию курсора
        target.scrollTop = cursorScroll;//Задаем scroll
        return;//Завершаем работу функции.
    }
    if (InsertTag_tags[open + close]) {//Если в глобальном массиве есть ключ с именем тека - добавляем вторую часть тега
        target.value += close;
        InsertTag_tags[open + close] = false;
    } else {//Если в глобальном массиве нету ключа с именем тега или этот ключ имеет значение false - добавляем в конец значения объекта первую часть тега
        target.value += open;
        InsertTag_tags[open + close] = true;
    }
}
function PositionSaver(target) {
    if (document.selection && document.selection.createRange) {//IE 4.0 (win32) & Opera 8.0
        cursor = document.selection.createRange().duplicate();
        return;
    }
    if (typeof(target.selectionStart) != "undefined") {//FireFox & Mozilla
        cursorStart = target.selectionStart;
        cursorEnd = target.selectionEnd;
        cursorScroll = target.scrollTop;
        return;
    }
}
// -->
</script>
<form>
    <textarea
        onselect='PositionSaver(this);'
        onclick='PositionSaver(this);'
        onkeyup='PositionSaver(this);'
        onfocus='PositionSaver(this);'
        id="area"
        cols="100"
        rows="20">
</textarea></form><br />
<a href="javascript:InsertTag('area', '', '');">[b]</a><br />
<a href="javascript:InsertTag('area', '[i]', '[/i]');">[i]</a><br />

Sardar, посмотрите, пожалуйста, кроссбраузерный ли этот код?

Это сообщение отредактировал(а) GZep - 18.2.2007, 12:51

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

Sardar

Дата 18.2.2007, 14:42 (ссылка)

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

Загрузка ...

Бегун

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

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

Вроде кроссбраузерный. Есть пара замечаний:

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

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

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