Объект selection. Проверка наличия выделенного фрагмента
Объект selection позволяет получить доступ к тексту, выделенному в окне
Web-браузера.
Свойство type объекта selection возвращает Text, если на странице что-
либо выделено, и None, если выделения нет.
Методы объекта selection:
? clear() стирает выделенный текст;
? createRange() возвращает объект TextRange (см. разд. 3.17.15);
? empty() убирает выделение с текста.
В Web-браузерах Firefox и Opera для получения выделенного текста в доку- менте (но не в текстовых полях) применяется метод getSelection() объекта window. Объект Selection, возвращаемый методом getSelection(), содер- жит следующие свойства:
? 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, которые входят в вы-
деленный фрагмент;
? isCollapsed возвращает true, если объект свернут в точку, и false —
в противном случае:
var rng = window.getSelection();
if (rng.isCollapsed) window.alert("Свернут");
else window.alert("Нет");
Методы объекта Selection:
? toString() возвращает текстовое содержимое выделенного фрагмента;
? collapse(<Узел>, <Смещение>) сворачивает выделение в указанную точку;
? collapseToStart() сворачивает выделение в начало фрагмента:
var rng = window.getSelection();
rng.collapseToStart(); // Сворачиваем в начало
? collapseToEnd() сворачивает выделение в конец фрагмента:
var rng = window.getSelection();
rng.collapseToEnd(); // Сворачиваем в конец
? deleteFromDocument() удаляет выделенный фрагмент из документа;
? 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(<Объект Range>) удаляет указанный объект Range из выде-
ленного фрагмента;
? removeAllRanges() удаляет все объекты Range из выделенного фраг-
мента;
? selectAllChildren(<Узел>) выделяет текстовое содержимое указанного узла и всех его потомков. Работает только в Firefox. Выделим содержи- мое первого абзаца в документе:
var rng = window.getSelection();
var elem = document.getElementsByTagName("p")[0];
rng.selectAllChildren(elem);
В качестве примера проверим наличие выделенного фрагмента и при его на- личии выведем фрагмент с помощью метода alert(), а затем уберем выде- ление (листинг 3.61).
Листинг 3.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));
}
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)