Blog. Just Blog

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

10.10.2021 | Категория: 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. }
Кроме этих сюда же можно отнести еще несколько функций для работы с полем ввода и выделенным текстом. Чуток не в тему, но очень близко, тем более, что чаще всего они используются в связке.

Читать статью целиком »
Просмотров: 101 | Комментариев: 0

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