aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/msselection/index.html
blob: 5760848324d15e2e088512b557f1808185ed7d7c (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
103
---
title: MSSelection
slug: Web/API/MSSelection
tags:
  - API
  - DHTML
  - DOM
  - 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>

<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据,请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div>

<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>