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
|
---
title: HTMLInputElement.setSelectionRange()
slug: Web/API/HTMLInputElement/setSelectionRange
tags:
- API
- HTML DOM
- HTMLInputElement
- Method
- Reference
- Text Field Selection API
translation_of: Web/API/HTMLInputElement/setSelectionRange
---
<div>{{APIRef("HTML DOM")}}</div>
<p><strong><code>HTMLInputElement.setSelectionRange()</code></strong> 関数は{{HTMLElement("input")}}または、{{HTMLElement("textarea")}}要素に対して有効です。要素に対して任意の開始と末尾のポジションを設定することでテキストを選択状態にします。</p>
<p>更に、より新しいブラウザでは選択する方向をも考慮する必要があります。つまり、ユーザーがクリックした後ドラッグして選択状態にする際のドラッグの方向が、はじめからなのか、おしりからなのか、考慮するということです。</p>
<p>この関数はアップデートされ、<code>HTMLInputElement.selectionStart</code>, <code>selectionEnd</code>, and <code>selectionDirection</code>プロパティを一度に呼び出し更新することができます。</p>
<p>Note that accordingly to the <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms spec</a> <code>selectionStart</code>, <code>selectionEnd</code> properties and <code>setSelectionRange</code> method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.".</p>
<p> </p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>element</em>.setSelectionRange(<em>selectionStart</em>, <em>selectionEnd</em> [, <em>selectionDirection</em>]);
</pre>
<h3 id="Parameters">Parameters</h3>
<p><code>selectionEnd</code> が<code>selectionStart</code>より小さい場合、両方の値は<code>selectionEnd</code>として扱われます。</p>
<dl>
<dt><code>selectionStart</code></dt>
<dd>0を基準とした選択状態の文字のインデックス。指定されたインデックスが文字の長さより長い場合は、文字の長さをインデックスに指定したものとみなされます。</dd>
<dt><code>selectionEnd</code></dt>
<dd>0を基準とした選択状態の最後の文字のインデックス。指定されたインデックスが文字の長さより長い場合は、文字の長さをインデックスに指定したものとみなされます。</dd>
<dt><code>selectionDirection</code> {{optional_inline}}</dt>
<dd>選択する際の方向を指定します。取りうる値は以下のとおりです。
<ul>
<li><code>"forward"</code></li>
<li><code>"backward"</code></li>
<li><code>"none"</code> 選択する際の方向が指定されていない時です。デフォルト値になります。</li>
</ul>
</dd>
</dl>
<h2 id="Example">Example</h2>
<p>サンプルの中のボタンをクリックすると、テキストボックスの３，４，５番目の文字が選択状態になります。 ("Mozilla"の"zil").</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><input type="text" id="text-box" size="20" value="Mozilla">
<button onclick="selectText()">Select text</button>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">function selectText() {
const input = document.getElementById('text-box');
input.focus();
input.setSelectionRange(2, 5);
}</pre>
<h3 id="実行結果">実行結果</h3>
<p>{{EmbedLiveSample("Example")}}</p>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
<td>{{Spec2("HTML5.1")}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
<div>
<p>{{Compat("api.HTMLInputElement.setSelectionRange")}}</p>
</div>
<h2 id="参照">参照</h2>
<ul>
<li>{{HTMLElement("input")}}</li>
<li>{{HTMLElement("textarea")}}</li>
<li>{{domxref("HTMLInputElement")}}</li>
<li>{{domxref("Selection")}}</li>
</ul>
|
