Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как вставить текст под курсором, исчерпывающий ответ 
:(
    Опции темы
Rigel
Дата 24.7.2007, 11:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Получается замечательно, но переход курсора в конец текста не всегда удобен - лучше бы он оставался приблизительно на месте редактирования - только вот никак не придумываетсяЮ как бы это сделать.  smile 
--------------------
С уважением. Rigel. http://www.smoliy.ru
PM MAIL WWW ICQ   Вверх
gridis
Дата 9.2.2008, 19:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Sardar, здравствуйте, у меня такой к Вам вопрос....
Мне вашь пример очень понравился.... только у меня такая проблема.... мне нужна вставка HTML кода под курсором... в опере и файрфоксе  я нормально вставляю через EditField.execCommand('inserthtml',false, "");

ИЕ такой функции нет..... 
PM MAIL   Вверх
Sardar
Дата 10.2.2008, 02:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


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

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



Получили селекцию, меняем содержимое через .pasteHTML(html)


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
introtel
Дата 1.6.2009, 14:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



спасибо за код. вопрос: а что делать если надо вставить текст под курсором. не ЗАМЕНИТЬ отселектированный текст, а как-то запомнить позицию курсора. в фф это можно а как быть с ИЕ?

Это сообщение отредактировал(а) introtel - 1.6.2009, 15:03
PM MAIL   Вверх
GogElf
Дата 17.7.2009, 00:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Сам я не местный  smile но хочу внести вклад.
Я не очень много понимаю в javascript (ну на стадии что-то сломать). Меня очень напрягает писать id и по ним чтоб код работал.  smile 
В общем кому хочется сделать 1 панельку с кнопками на 2-3 или более полей то заменяем:
Код

onload=function(){text=new TextAreaSelectionHelper(document.getElementById("textarea"));}

на
Код

function poz(names){
    text=new TextAreaSelectionHelper(names);
}

И вписываем onclick
Код

<textarea cols="80" rows="10" onclick="return poz(this)"></textarea>

 smile 

Это сообщение отредактировал(а) GogElf - 17.7.2009, 01:50
PM MAIL   Вверх
maxipub
Дата 31.3.2011, 21:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Тема прикреплена... она еще жива?

Заметил странный баг в оригинальном скрипте. FF 3.6.13

Код

<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("textarea"));}
function test() {
 text.setSelectedText("[test]","[/test]");
// text.setSelectedText("[test]");
}
</script>

<textarea id="textarea" cols=80 rows=20>0 qwerty asdfgh zxcvbn
1 qwerty asdfgh zxcvbn
2 qwerty asdfgh zxcvbn
3 qwerty asdfgh zxcvbn
4 qwerty asdfgh zxcvbn
5 qwerty asdfgh zxcvbn
6 qwerty asdfgh zxcvbn
7 qwerty asdfgh zxcvbn
8 qwerty asdfgh zxcvbn
9 qwerty asdfgh zxcvbn</textarea>
<span onClick="test()">Test</span>


Оригинальный код, просто с прописанными данными для textarea.

Если выделить мышкой несколько строк, но так, чтоб одна из строк была выделена не полностью, например:

Код

4 qwerty asdfgh zxcvbn
5 qwerty asdfgh zxcvbn
6 qwerty asdfgh


После клика по "Test" будет выполнена некорректная ставка.

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

В общем, очень жаль, наработка вроде ничего, но работает почему-то некорректно. Судя по всему, что-то с обработкой событий.

ЗЫ: вот и в IE 8 тоже нашел небольшой баг, но это еще терпимо. К примеру, выделяем строки:

Код

3 qwerty asdfgh zxcvbn
4 qwerty asdfgh zxcvbn
5 qwerty asdfgh zxcvbn
6 qwerty asdfgh zxcvbn
7 qwerty asdfgh zxcvbn


После клика по "Test" будет выполнена корректная ставка, но с некорректным выделением (что выделяется - указано жирным):

[test]3 qwerty asdfgh zxcvbn
4 qwerty asdfgh zxcvbn
5 qwerty asdfgh zxcvbn
6 qwerty asdfgh zxcvbn
7 qwerty asdfgh zxcvbn
[/test]

Т.е. он начало выделения смещает на минус (количество переводов в выделенной строке - 1).

Как убрать эти баги? Особенно первый. Или подскажите альтернативу. Сам писал-писал, не вышло. Другие варианты смотрел - не подходят.

Необходимо чтоб после вставки текста под курсор, texarea всегда подскролливался к курсору (к месту вставки).

Только чтоб без лишних библиотек и наворотов. Обычная же вещь, с чего сложности?

Заранее благодарю!
PM MAIL   Вверх
maxipub
Дата 31.3.2011, 23:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Если не понятно о чем речь, могу снять видео и выложить чтоб быстрее было.

Кстати, тут на форуме прогеров (хе-хе smile) данная функция тоже не совсем чисто работает. Но то что тут - это уже мелочи. Вообще как на vBulletin сделано - идеал. По крайней мере, так и не нашел к чему докопаться. Другое дело, что что тут, что там - js-ы все шифрованные, собаки.
PM MAIL   Вверх
TsibaSasha
Дата 6.3.2012, 03:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Tsyba



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

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



Браво smile 
Уважаю, столько сил и терпения надо иметь, что бы написать такой код для форума)
PM MAIL WWW   Вверх
Sanchezzz
Дата 17.9.2012, 12:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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



Предлагаю свое решение с использованием плагина caret
Пощупать можно тут накидал демку 




--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.1304 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.