Оглавление

17.14. Объект selection. Проверка наличия выделенного фрагмента

Объект selection позволяет получить доступ к тексту, выделенному в окне Web-браузера.
Свойство type объекта selection возвращает Text, если на странице что-либо выделено, и None, если выделения нет.

 

Методы объекта selection:
□  clear() стирает выделенный текст;
□  createRange() возвращает объект TextRange (см. разд. 17.15);
□  empty() убирает выделение с текста.

 

В Web-браузерах Firefox и Opera для получения выделенного текста в документе (но не в текстовых полях) применяется метод getSelection() объекта window. Объект selection, возвращаемый методом getseiection(), содержит следующие свойства:
□ anchorNode возвращает ссылку на текстовый узел, в котором началось выделение. В Web-браузере Opera всегда возвращает текстовый узел, в котором находится левая граница фрагмента, независимо от направления выделения. Получим элемент, в котором началось выделение, и сделаем его фон красным:

   var rng = window.getSelection();
   rng.anchorNode.parentNode.style.backgroundColor = "red";

□ anchoroffset возвращает смещение от начала текстового узла (возвращаемого свойством anchorNode) до начальной границы выделения:

   var rng = window.getSelection();
   window.alert(rng.anchorOffset);

□ focusNode возвращает ссылку на текстовый узел, в котором закончилось выделение. В Web-браузере Opera всегда возвращает текстовый узел, в котором находится правая граница фрагмента, независимо от направления выделения. Получим элемент, в котором закончилось выделение, и сделаем его фон красным:

   var rng = window.getSelection();
   rng.focusNode.parentNode.style.backgroundColor = "red";

□ focusoffset возвращает смещение от начала текстового узла (возвращаемого свойством focusNode) до конечной границы выделения:

   var rng = window.getSelection();
   window.alert(rng.anchorOffset);

□ rangecount возвращает количество объектов Range, которые входят в выделенный фрагмент;
□ iscoiiapsed возвращает true, если объект свернут в точку, и false — в противном случае:

   var rng = window.getSelection();
   if (rng.isCollapsed) window.alert("Свернут");
   else window.alert("Нет");

 

Методы объекта selection:
□ tostring() возвращает текстовое содержимое выделенного фрагмента;
□ collapse (<Узел>, <Смещение>) сворачивает выделение в указанную точку;

□ coiiapseTostart() сворачивает выделение в начало фрагмента:

   var rng = window.getSelection();
   rng.collapseToStart(); // Сворачиваем в начало

□ coiiapseToEnd() сворачивает выделение в конец фрагмента:

   var rng = window.getSelection();
   rng.collapseToEnd(); // Сворачиваем в конец

□ deieteFromDocument() удаляет выделенный фрагмент из документа;
□ extend (<Узел>, <Смещение>) перемещает конечную границу выделенного фрагмента в указанную позицию. В качестве примера расширим (или уменьшим в зависимости от направления выделения) фрагмент до конца узла, содержащего конечную границу:

   var rng = window.getSelection();
   if (!rng.isCollapsed) {
      var len = rng.focusNode.length;
      if (rng.focusOffset!=len) {
         rng.extend(rng.focusNode, len);
      }
   }
   else window.alert("Нет выделенного фрагмента");

□ getRangeAt (<Индекс>) возвращает объект Range по указанному индексу. Выражение getRangeAt(0) позволяет получить объект Range, полностью соответствующий текущему выделению;
□ addRange (<Объект Range>) добавляет указанный объект Range к текущему выделению;
□ removeRange (<0бъект Range>) удаляет указанный объект Range из выделенного фрагмента;
□ removeAHRanges() удаляет все объекты Range из выделенного фрагмента;
□ selectAllchildren(<Узeл>) выделяет текстовое содержимое указанного узла и всех его потомков. Работает только в Firefox. Выделим содержимое первого абзаца в документе:

var rng = window.getSelection();
var elem = document.getElementsByTagName("p")[0];
rng.selectAllChildren(elem);

 

В качестве примера проверим наличие выделенного фрагмента и при его наличии выведем фрагмент с помощью метода alert О, а затем уберем выделение (листинг 61).

 

Листинг 61. Проверка наличия выделенного фрагмента


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Проверка наличия выделенного фрагмента</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_click() {
   if (window.getSelection) { // FF, Opera
      window.alert(window.getSelection().toString());
   }
   else { // Для IE
      if (document.selection.type=="Text") {
         var range1 = document.selection.createRange();
         window.alert("Выделенный фрагмент\n\n "" + range1.text + """);
         document.selection.empty(); // Убираем выделение
      }
      else {
         window.alert("Нет выделенного фрагмента");
      }
   }
}
//-->
</script>
</head>
<body>
<p>Проверка наличия выделенного фрагмента</p>
<p><input type="button" value="Проверить" onclick="f_click();"></p>
</body>
</html>

 

В Web-браузерах Firefox и Opera фрагмент, выделенный в текстовом поле, нельзя получить с помощью метода getSelection(). Вместо этого метода следует использовать свойства selectionStart и selectionEnd. Пример:


   // Ссылка на текстовое поле
   var elem = document.getElementById("txt1");
   if (elem.selectionStart != undefined &&
       elem.selectionEnd != undefined) {
      var s = elem.selectionStart; // Начальная позиция
      var e = elem.selectionEnd; // Конечная позиция
      window.alert(elem.value.substring(s, e));
   }
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити