Blog. Just Blog

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

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

Функция получения границ выделения в поле ввода. В качестве параметров передается элемент поля ввода, на выходе объект с значениями начальной и конечной позиции выделения.
Code (JavaScript) : Убрать нумерацию
  1. //---------------------------------------------------------
  2. // Получение границ выделения в поле ввода
  3. //---------------------------------------------------------
  4. function get_selected_input(el) {
  5.     var pos={start:0, end:0};
  6.  
  7.     if (el.selectionStart) {
  8.         // Mozilla + Opera + Chrome + Safari
  9.         pos={
  10.             start: el.selectionStart,
  11.             end: el.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.                 start: before.text.length,
  26.                 end: (before.text.length + sel.text.length)
  27.             };
  28.         }
  29.     }
  30.     return pos;
  31. }
Функция установки выделения в поле ввода. В качестве параметров передается элемент поля ввода, позиция начала и конца выделения.
Code (JavaScript) : Убрать нумерацию
  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, в новых браузерах все работает корректно.
Code (JavaScript) : Убрать нумерацию
  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=0; i<rc.text.length; i++) {
  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. }
Функция для получения выделенного текста на всей странице. Это не обязательно должно быть поле ввода, а вообще произвольный фрагмент.
Code (JavaScript) : Убрать нумерацию
  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. }
Вставка произвольного текста в текущую позицию поля ввода с возможностью обрамления его дополнительными текстовыми фрагментами.
Code (JavaScript) : Убрать нумерацию
  1. //---------------------------------------------------------
  2. // Добавление текста в поле ввода
  3. //---------------------------------------------------------
  4. function insert_data(el, text, before, after) {
  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_pos, end_pos);
  25.         }
  26.         el.value = el.value.substring(0, start_pos) + before + text +
  27.                    after + el.value.substring(end_pos, el.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 пустые строки.

Поделиться ссылкой ВКонтакте
Просмотров: 754 | Комментариев: 0

Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

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

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

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

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (27), AJAX (5), Assembler (348), COM (39), CSS (39), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (48), iconBIT (4), JavaScript (68), MySQL (13), Nikon (19), PDF (9), PHP (119), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (22), аксессуары (12), анализаторы файлов (8), архиваторы (5), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (18), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (120), выпечка (26), выставки (116), генератор ПСЧ (10), графика (118), десерты (31), Египет (8), заготовки на зиму (45), закуска (21), закуска к пиву (24), зарядные устройства (23), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (306), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (68), мониторы (6), музеи (72), мультимедиа (70), мясо (59), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (47), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (127), полезные функции (39), прохождения (4), процессы (25), птица (20), путешествия (25), распаковка (22), реверсинг (51), рыба (34), салаты (18), сброс триала (4), сеть (36), система (177), Сокольники (8), соусы (14), супы (14), телефоны (8), Тунис (6), умный дом (12), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (17), Яндекс (10)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 34,315 раз
<< 2024 - АПРЕЛЬ >>
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
День работника ломоперерабатывающей отрасли России
День российской полиграфии
День юридической службы Министерства внутренних дел России
День принятия Крыма, Тамани и Кубани в состав Российской империи
День подснежника
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 380
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0053 сек.) / Память: 4.5 Mb
Наверх