blob: ecbd8817e322ed90f636723afb5166b83af34799 (
plain)
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
|
---
title: MSSelection
slug: orphaned/Web/API/MSSelection
tags:
- API
- DHTML
- DOM
- MSSelection
original_slug: Web/API/MSSelection
---
<div>{{ ApiRef("DOM") }}{{Non-standard_Header}}</div>
<div class="blockIndicator warning">
<p><strong>IE Only</strong></p>
该属性是IE专有的。尽管IE很好地支持它，但大部分其它浏览器已经不支持该属性。该属性仅应在需兼容低版本IE时作为其中一种方案，而不是在跨浏览器的脚本中完全依赖它。</div>
<p><code>MSSelection</code> 对象表示用户选择的文本范围或插入光标(Caret)的当前位置，类似于标准定义的 {{domxref("Selection")}} 接口。它主要通过配套的 {{domxref("TextRange")}} 接口进行操作。</p>
<p>该接口从IE4开始实现，但直到IE9时添加了对标准 <code>Selection</code> 接口的支持时，为了区分它才被命名为 <code>MSSelection</code>。可供修改和使用的 <code>MSSelection</code> 可通过 {{domxref("document.selection")}} 属性获取，但是这在IE11被彻底移除。</p>
<p>注意，在非IE浏览器不支持该接口，可使用替代的标准 {{domxref("Selection")}} 接口。</p>
<h2 id="Properties" name="Properties">属性</h2>
<dl>
<dt>{{domxref("MSSelection.type")}}{{ReadOnlyInline}}</dt>
<dd>
<p>返回选中区域的类型。</p>
</dd>
</dl>
<h2 id="Methods" name="Methods">方法</h2>
<dl>
<dt>{{domxref("MSSelection.empty()")}}</dt>
<dd>取消当前选中区，将选中区类型设置为 <code>none</code>。</dd>
<dt>{{domxref("MSSelection.clear()")}}</dt>
<dd>清除选中区的内容，将选中区类型设置为 <code>none</code>。注意，该方法可以删除不可编辑的元素。</dd>
<dt>{{domxref("MSSelection.createRange()")}}</dt>
<dd>在当前选中区上创建并返回一个 <code>TextRange</code>，其内容和当前选区一致。返回的区域在修改时不会直接作用到选区上，除非使用 {{domxref("TextRange.select()")}} 方法。</dd>
<dt>{{domxref("MSSelection.createRangeCollection()")}}</dt>
<dd>返回一个 {{domxref("TextRangeCollection")}}，该集合包含选区中所有区域对应的 <code>TextRange</code>。注意该对象不是一个 {{jsxref("Array")}}，且IE中的Web网页不支持多个选区，因此它总是返回单个对象的集合。</dd>
</dl>
<h2 id="示例">示例</h2>
<p>以下示例在<strong>IE10以下</strong>有效。该示例通过 <code>document.selection</code> 获取 <code>MSSelection</code> 对象，并清空选区中的内容。</p>
<pre class="brush:js">var sel = document.selection;
sel.clear();</pre>
<h2 id="开发者笔记">开发者笔记</h2>
<h3 id="使用_TextRange_操作选中区域">使用 TextRange 操作选中区域</h3>
<div class="blockIndicator warning">
<p>仅在<strong>IE9以下</strong>有效。在浏览器允许的情况下，应优先使用 {{domxref("Selection")}} 接口。</p>
</div>
<p>{{domxref("document.selection")}} 属性返回一个 <code>MSSelection</code> 对象，<code>selection.createRange()</code> 方法创建一个和当前选中区域一致的 {{domxref("TextRange")}} 对象。</p>
<pre class="brush:js">var sel = document.selection;
var range = sel.createRange();
alert(range.text);
// 输出被选区域的纯文本</pre>
<p>注意，<code>createRange</code> 方法并不创建引用，如果希望通过该方法修改选中区域，则需要调用 <code>TextRange.select</code> 方法。</p>
<h3 id="selection_兼容性"><code>selection</code> 兼容性</h3>
<p><code>document.selection</code> 属性返回当前文档的 <code>MSSelection</code> 对象。标准规定一个窗口/文档可能有多个不相邻选区，但只有Firefox实现通过 <kbd>Ctrl</kbd> 选中多个区域；IE中一般也只允许文档只存在一个被选中的 <code>TextRange</code>。</p>
<p>然而，在其它浏览器中，<code>document</code> 并不存在一个所谓 <code>selection</code> 属性——它们通过标准 <a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 实现对选区的操作，也就是通过 <code>window.getSelection()</code> 方法获取 {{domxref("Selection")}} 对象，并使用标准的 {{domxref("Range")}} 对象对文本片段作出处理。IE11及之后的版本也放弃了 <code>document.selection</code> 对象而转为使用标准接口（尽管 <code>TextRange</code> 一直保留，但大多数情况下它已失去作用）。</p>
<p>这很容易引起迷惑。通常，如果脚本只要求兼容最新的浏览器，那么标准的接口是最佳的选择；但通常目前的网站仍希望兼容IE8或其以下的浏览器，因此，最好的做法是同时处理两者，也就是在不支持标准接口时尝试使用 <code>MSSelection</code> 方式，但不要把该方式作为唯一的选择。</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="row" style="width: 15px;"></th>
<th scope="col">IE</th>
<th scope="col">其它浏览器</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="width: 15%;">{{domxref("MSSelection")}} {{non-standard_inline()}}</th>
<td>≤10(IE9后应使用标准API)</td>
<td style="width: 60%;">不支持（详见<a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a>）</td>
</tr>
</tbody>
</table>
<h2 id="See_also" name="See_also">扩展</h2>
<ul>
<li>{{domxref("TextRange")}} 接口</li>
<li>{{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口</li>
<li><a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 用于取代该非标准接口</li>
</ul>
|
