Blog. Just Blog

Кроссбраузерное получение и установка выделения в INPUT

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Шпаргалка для себя, чтобы не искать. Набор полезных функций для работы с полями ввода, такими как TEXTAREA и INPUT TYPE="TEXT". С помощью этих функций можно узнать, какой фрагмент текста выделен или же наоборот, выделить текст заданной длины с определенной позиции.

Функция получения границ выделения в поле ввода. В качестве параметров передается элемент поля ввода, на выходе объект с значениями начальной и конечной позиции выделения.
  1. //---------------------------------------------------------
  2. // Получение границ выделения в поле ввода
  3. //---------------------------------------------------------
  4. function get_selected_input(el) {
  5.     var pos={start:0end:0};
  6.  
  7.     if (el.selectionStart) {
  8.         // Mozilla + Opera + Chrome + Safari
  9.         pos={
  10.             startel.selectionStart,
  11.             endel.selectionEnd
  12.         };
  13.     }
  14.     else {
  15.         // IE
  16.         if (document.selection) {
  17.             var sel=el.createTextRange();
  18.             sel.moveToBookmark(document.selection.createRange().getBookmark());
  19.  
  20.             var before el.createTextRange();
  21.             before.collapse(true);
  22.             before.setEndPoint('EndToStart'sel);
  23.  
  24.             pos={
  25.                 startbefore.text.length,
  26.                 end: (before.text.length sel.text.length)
  27.             };
  28.         }
  29.     }
  30.     return pos;
  31. }
Функция установки выделения в поле ввода. В качестве параметров передается элемент поля ввода, позиция начала и конца выделения.
  1. //---------------------------------------------------------
  2. // Установка границ выделения в поле ввода
  3. //---------------------------------------------------------
  4. function set_selected_input(el,start,end) {
  5.     // Корректировка границ
  6.     if (start>end) {
  7.         var tmp=start;
  8.         start=end;
  9.         end=tmp;
  10.     }
  11.  
  12.     if (el.selectionStart) {
  13.         // Mozilla + Opera + Chrome + Safari
  14.         el.setSelectionRange(start,end);
  15.     }
  16.     else {
  17.         // IE
  18.         var sel=el.createTextRange();
  19.         sel.collapse(true);
  20.         sel.moveStart('character',start);
  21.         sel.moveEnd('character', (end-start));
  22.         sel.select();
  23.     }
  24.     return true;
  25. }
Кроме этих сюда же можно отнести еще несколько функций для работы с полем ввода и выделенным текстом. Чуток не в тему, но очень близко, тем более, что чаще всего они используются в связке.

Функция для получения позиции курсора в поле ввода. Есть проблемы с получением позиции в совсем старых IE, в новых браузерах все работает корректно.
  1. //---------------------------------------------------------
  2. // Получение позиции курсора в поле ввода
  3. //---------------------------------------------------------
  4. function get_caret_pos(el) {
  5.     var pos=0;
  6.  
  7.     if (el.selectionStart || el.selectionStart=='0') {
  8.         if (el.selectionDirection=='backward') {
  9.             pos=el.selectionStart;
  10.         }
  11.         else {
  12.             pos=el.selectionEnd;
  13.         }
  14.     }
  15.     else if (document.selection) {
  16.         el.focus();
  17.         var r=document.selection.createRange();
  18.         if (r) {
  19.             var re=el.createTextRange();
  20.             var rc=re.duplicate();
  21.             re.moveToBookmark(r.getBookmark());
  22.             rc.setEndPoint('EndToStart're);
  23.  
  24.             var add_newlines=0;
  25.             for (var i=0i<rc.text.lengthi++) {
  26.                 if (rc.text.substr(i,2) == '\r\n') {
  27.                     add_newlines+=2;
  28.                     i++;
  29.                 }
  30.             }
  31.             pos=rc.text.length-add_newlines;
  32.         }
  33.     }
  34.     return pos;
  35. }
Функция для получения выделенного текста на всей странице. Это не обязательно должно быть поле ввода, а вообще произвольный фрагмент.
  1. //---------------------------------------------------------
  2. // Получение выделенного текста на странице
  3. //---------------------------------------------------------
  4. function get_selected_text() {
  5.     var txt='';
  6.     if (document.getSelection) {
  7.         // Mozilla + Opera
  8.         txt=document.getSelection();
  9.     }
  10.     else if (document.selection) {
  11.         // IE
  12.         txt=document.selection.createRange().text;
  13.     }
  14.     else if (window.getSelection) {
  15.         // Chrome + Safari
  16.         txt=window.getSelection();
  17.     }
  18.     txt=txt.toString();
  19.     return txt;
  20. }
Вставка произвольного текста в текущую позицию поля ввода с возможностью обрамления его дополнительными текстовыми фрагментами.
  1. //---------------------------------------------------------
  2. // Добавление текста в поле ввода
  3. //---------------------------------------------------------
  4. function insert_data(eltextbeforeafter) {
  5.     var tmp;
  6.     // Internet Explorer
  7.     if (document.selection) {
  8.         var str document.selection.createRange().text;
  9.         el.focus();
  10.         var sel document.selection.createRange();
  11.         sel.text before+text+after;
  12.         if (text=='') {
  13.             tmp=after.length;
  14.             sel.moveStart('character',-tmp);
  15.             sel.moveEnd('character',-tmp);
  16.         }
  17.         sel.select();
  18.     }
  19.     // Mozilla
  20.     else if (el.selectionStart || el.selectionStart == '0') {
  21.         var start_pos el.selectionStart;
  22.         var end_pos el.selectionEnd;
  23.         if (text=='') {
  24.             text el.value.substring(start_posend_pos);
  25.         }
  26.         el.value el.value.substring(0start_pos) + before text +
  27.                    after el.value.substring(end_posel.value.length);
  28.         if (text=='') {
  29.             tmp=before.length;
  30.             el.selectionStart=start_pos+tmp;
  31.             el.selectionEnd=end_pos+tmp;
  32.         }
  33.         else {
  34.             tmp=start_pos+before.length+after.length+text.length;
  35.             el.selectionStart=tmp;
  36.             el.selectionEnd=tmp;
  37.         }
  38.         el.focus();
  39.     }
  40.     return true;
  41. }
Подобная функция обычно используется в различных редакторах bbCode для вставки текста с обрамлением псевдотегами, например [b]выделенный текст[/b] и т.п. Но ее также легко применить для вставки только текста, передав в качестве параметров before и after пустые строки.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 101 | Комментариев: 0

Метки: JavaScript

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0033 сек.) / Память: 4.75 Mb
Наверх