ywork2020.com

Title

入力要素のテキストを選択状態にする

目次 (INDEX)

select とは

ここで説明する select とは次の語句からなる JavaScript のメソッドです。
select
読み: セレクト
意味: 選ぶ、選択する

目次に戻る

select メソッドの概要

このメソッドは、入力要素のテキストを選択した状態にします。

入力要素とは、Web ページ上で、ユーザーが入力するためのインターフェイスに置き換えられる要素のことです。 例えば textarea 要素や input 要素などが挙げられます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

inputElement.select();

目次に戻る

サンプルコードと実行結果

ここでは、テキストが入力されたテキストボックスとボタンを題材にしました。

ボタンをクリックすることで、テキストボックスのテキストが選択される仕様です。

サンプルコード: HTML
<body>
	<p><input type="text" value="サンプルテキスト" id="idInText"></p>
	<p><input type="button" value="セレクト" onclick="funcSelect()"></p>
	<script>...</script>
</body>
  • 02: input type="text" (id="idInText" をもつ、テキストボックスです。)
  • 03: input type="button" (ボタンです。これをクリックすると funcSelect() 関数を呼び出します。)
サンプルコード: script
<script>
	let elmInText = document.getElementById("idInText");
	function funcSelect(){
		elmInText.select();
	}
</script>
  • 02: elmInText (id="idInText" を持つ要素を Element オブジェクトとして取得したものです。)
  • 03-05: function funcSelect(){ 処理 } (funcSelect() という名前の関数です。呼び出されると 処理 を実行します。)
  • 04: elmInText.select() (select メソッドを使用しているコードです。 id="idInText" の要素のテキストを選択します。)
実行結果:

目次に戻る