diff options
Diffstat (limited to 'files/ja/web/api/htmlinputelement/select/index.md')
| -rw-r--r-- | files/ja/web/api/htmlinputelement/select/index.md | 91 |
1 files changed, 41 insertions, 50 deletions
diff --git a/files/ja/web/api/htmlinputelement/select/index.md b/files/ja/web/api/htmlinputelement/select/index.md index 8dc1137a8d..7cf8d9e38a 100644 --- a/files/ja/web/api/htmlinputelement/select/index.md +++ b/files/ja/web/api/htmlinputelement/select/index.md @@ -5,79 +5,70 @@ tags: - API - HTML DOM - HTMLInputElement - - Method - - Reference + - メソッド + - NeedsCompatTable + - リファレンス +browser-compat: api.HTMLInputElement.select translation_of: Web/API/HTMLInputElement/select --- -<div>{{ APIRef("HTML DOM") }}</div> +{{ APIRef("HTML DOM") }} -<p><strong><code>HTMLInputElement.select()</code></strong> メソッドは、{{HTMLElement("textarea")}} 要素またはテキストフィールドを含む {{HTMLElement("input")}} 要素内のすべてのテキストを選択します。</p> +**`HTMLInputElement.select()`** メソッドは、{{HTMLElement("textarea")}} 要素またはテキストフィールドを含む {{HTMLElement("input")}} 要素内のすべてのテキストを選択します。 -<h2 id="シンタックス">シンタックス</h2> +## 構文 -<pre class="syntaxbox notranslate"><em>element</em>.select();</pre> +```js +element.select(); +``` -<h2 id="例">例</h2> +## 例 -<p>この例のボタンをクリックすると、<code><input></code> 要素内のすべてのテキストが選択されます。</p> +この例のボタンをクリックすると、 `<input>` 要素内のすべてのテキストが選択されます。 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><input type="text" id="text-box" size="20" value="Hello world!"> -<button onclick="selectText()">Select text</button> -</pre> +```html +<input type="text" id="text-box" size="20" value="Hello world!"> +<button onclick="selectText()">テキストを選択</button> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js notranslate">function selectText() { +```js +function selectText() { const input = document.getElementById('text-box'); input.focus(); input.select(); -}</pre> +} +``` -<h3 id="結果">結果</h3> +### 結果 -<p>{{EmbedLiveSample("Example")}}</p> +{{EmbedLiveSample("Example")}} -<h2 id="メモ">メモ</h2> +## メモ -<p><code>element.select()</code> を呼んだからといって必ずしも入力がフォーカスされるわけではないので、{{domxref("HTMLElement.focus()")}} で使うことが多いです。</p> +`element.select()` を呼び出しても、入力欄がフォーカスを得るとは限りませんので、よく {{domxref("HTMLElement.focus")}} と一緒に使われます。 -<p>これがサポートされていないブラウザでは、パラメータ 0 と入力値の長さを指定して <a href="/ja/docs/Web/API/HTMLInputElement/setSelectionRange">HTMLInputElement.setSelectionRange()</a> を呼び出すことで置き換えることができます。</p> +これに対応していないブラウザーでは、 [HTMLInputElement.setSelectionRange()](/ja/docs/Web/API/HTMLInputElement/setSelectionRange) の引数に 0 と入力値の長さを指定して呼び出すことで置き換えることができます。 -<pre class="brush: html notranslate"><input onClick="this.select();" value="Sample Text" /> -<!-- equivalent to --> -<input onClick="this.setSelectionRange(0, this.value.length);" value="Sample Text" /> -</pre> +```html +<input onClick="this.select();" value="Sample Text" /> +<!-- equivalent to --> +<input onClick="this.setSelectionRange(0, this.value.length);" value="Sample Text" /> +``` -<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('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("api.HTMLInputElement.select")}}</p> +{{Compat}} -<h2 id="あわせて参照">あわせて参照</h2> +## 関連情報 -<ul> - <li>{{ HTMLElement("input") }}</li> - <li>{{ HTMLElement("textarea") }}</li> - <li>{{ domxref("HTMLInputElement") }}</li> - <li>{{ domxref("HTMLInputElement.setSelectionRange") }}</li> -</ul> +- {{ HTMLElement("input") }} +- {{ HTMLElement("textarea") }} +- {{ domxref("HTMLInputElement") }} +- {{ domxref("HTMLInputElement.setSelectionRange") }} |