HTMLInputElement: setSelectionRange() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

HTMLInputElement.setSelectionRange() メソッドは、 <input> または <textarea> 要素の中で現在のテキストの選択範囲の開始位置と終了位置を設定します。

オプションとして、新しいバージョンのブラウザーでは、選択が行われたとみなす方向を指定することができます。これにより、例えば、ユーザーが選択範囲を設定するのに、選択されたテキストの末尾から先頭に向けてクリックとドラッグが行われたことを示すことができます。

この関数は 1 回の呼び出しで、 HTMLInputElement.selectionStart, selectionEnd, selectionDirection の各プロパティを更新します。

WHATWG フォーム仕様書によると、 selectionStart, selectionEnd プロパティと setSelectionRange メソッドは、 text, search, URL, tel, password 型の入力欄にのみ適用されることに注意してください。 Chrome のバージョン 33 以降では、それ以外の入力型でこれらのプロパティとメソッドにアクセスすると例外が発生します。例えば、 number 型の入力欄では、 "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection" （'HTMLInputElement' の 'selectionStart' プロパティを読み取りに失敗しました。この input 要素の入力型 ('number') は選択に対応していません）となります。

input 要素のすべてのテキストを選択したい場合は、代わりに HTMLInputElement.select() メソッドを使用してください。

構文

js
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)

引数

selectionEnd が selectionStart より小さい場合、両方の値は selectionEnd として扱われます。

selectionStart

選択する最初の文字の 0 から始まる位置です。位置が要素の値の長さよりも大きい場合は、要素の値の末尾の位置と見なされます。

selectionEnd

選択する最後の文字の次の 0 から始まる位置です。位置が要素の長さよりも大きい場合は、要素の値の末尾の位置と見なされます。

selectionDirection 省略可

選択が行われたと見なされる方向を示す文字列です。取りうる値は次の通りです。

"forward"
"backward"
"none" 選択方向が不明または無関係な場合です。既定値です。

html
<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">テキストを選択</button>

JavaScript

js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setSelectionRange(2, 5);
}

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年6月24日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: setSelectionRange() メソッド

In this article

構文

引数

返値

例

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN