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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: Window.getSelection()
slug: Web/API/Window/getSelection
translation_of: Web/API/Window/getSelection
---
<div>{{ ApiRef() }}</div>
<h2 id="Summary" name="Summary">Коротко</h2>
<p>Метод возвращает объект {{domxref("Selection")}}, представленный в виде диапазона текста, который пользователь выделил на странице.</p>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre>
<h3 id="Значение">Значение</h3>
<p><font face="consolas, Liberation Mono, courier, monospace">Объект </font>{{domxref("Selection")}}.</p>
<p>При добавлении в параметр пустую строку или воспользовавшись методом {{jsxref("Selection.toString()")}} вам вернут строку, которую выделил пользователь.</p>
<h2 id="Example" name="Example">Пример</h2>
<pre class="brush:js">function foo() {
var selObj = window.getSelection();
alert(selObj);
var selRange = selObj.getRangeAt(0);
// вернет диапазон Range
}</pre>
<h2 id="Notes" name="Notes">Заметки</h2>
<h3 id="String_representation_of_the_Selection_object">String representation of the Selection object</h3>
<p>В JavaScript при попытке передать в функцию, принимающую строку (как на пример {{ Domxref("window.alert()") }} или же {{ Domxref("document.write()") }}), функция попробует сделать из любого параметра строку, даже если этот параметр является объектом, функцией со своими методами и свойствами.</p>
<p>В приведенном выше примере <code>selObj.toString() автоматически задействуется, когда мы передаем в </code>{{domxref("window.alert()")}} переменную selObj как параметр, который должен быть строкой. Однако мы не можем использовать свойства и метода объекта String, как на пример : <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code>. В следствии чего, вам необходимо будет применить вручную метод <code>toString(), как тут:</code></p>
<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
<ul>
<li><code>selObj</code> это объект <code>Selection</code>.</li>
<li><code>selectedText</code> это строка (Выделенный текст).</li>
</ul>
<h3 id="Родственные_объекты">Родственные объекты</h3>
<p>Вы так же можете использовать такой способ вызова {{domxref("Document.getSelection()")}}, который работает идентично {{domxref("Window.getSelection()")}}.</p>
<p>Поля ввода HTML (inputs) предоставляют более удобный API для работы с выделенным текстом (смотрите {{domxref("HTMLInputElement.setSelectionRange()")}}).</p>
<p>На заметку, разница между <em>selection</em> и <em>focus</em>. {{domxref("Document.activeElement")}} - это то, что вернется элемент, который выделен (focused) .</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Selection API", "#extensions-to-window-interface", "Window.getSelection()")}}</td>
<td>{{Spec2("Selection API")}}</td>
<td>Новая специф.</td>
</tr>
<tr>
<td>{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}</td>
<td>{{Spec2("HTML Editing")}}</td>
<td>Начальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Особенность</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>9</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{ CompatUnknown() }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also"></h2>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Selection_API">Selection API</a></li>
<li>{{domxref("Selection")}}</li>
<li>{{domxref("Range")}}</li>
<li>{{domxref("Document.getSelection()")}}</li>
<li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li>
</ul>
|
