【javascript】テキストエリアの文字列を選択状態にする

公開日：2014/06/29

更新日：2015/02/05

カテゴリー: javascript

javascriptを使ってテキストエリアの文字列を選択状態にする方法を説明します。

テキストエリアの作成

テキストエリアを以下のように作成し、フォームのnameに「form」を、テキストエリアのnameに「textarea」を指定します。

<form name="form">
<p><input type="button" value="文字列を全部選択する" onClick="textarea_select()"></p>
<textarea name="textarea">ボタンがクリックされると、このテキストエリア内の文字列が選択されます。</textarea>
</form>

javascriptの記述

javascriptは以下のように記述します。

function textarea_select(){
	//テキストエリアをフォーカスする
	document.form.textarea.focus();
	//テキストエリアを全選択する
	document.form.textarea.select();
}

サンプルプログラム

以上を踏まえてテキストエリアの文字列を選択状態にする実行可能なプログラムを作成すると次のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>デモ</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript">
      <!--
	function textarea_select(){
		//テキストエリアをフォーカスする
		document.form.textarea.focus();
		//テキストエリアを全選択する
		document.form.textarea.select();
	}
      //-->
    </script>
  </head>
  <body>
	<form name="form">
	<p><input type="button" value="文字列を全部選択する" onClick="textarea_select()"></p>
	<textarea name="textarea">ボタンがクリックされると、このテキストエリア内の文字列が選択されます。</textarea>
	</form>
  </body>
</html>

このサンプルプログラムのデモはこちら。

マウスオーバーされた時に選択状態にする

上の方法ではボタンがクリックされた時に選択状態になりますが、以下の方法だとテキストエリアがマウスオーバーされたときに選択状態となります。

<textarea readonly onmouseover="this.focus();this.select()">テキストエリアがマウスオーバーされると、このテキストエリアが選択されます。</textarea>

この1行のみで動きます。

このサンプルプログラムのデモはこちら。

あわせて読んでほしい！

Follow @ysklog_net 　

1：千田：2015/03/15 0:37:40

オンクリックも、１行で記述できますよ。↓

こちらの「テキストエリア以外の文字の選択」が、とても役立ちました。
ありがとうございます。

2：千田：2015/03/15 0:40:28

再度すみません。タグが使用できないようなので。
例文のonmouseoverをonclickに直すと、１行で可能です。

3：管理人：2015/03/16 7:32:47

千田さんコメントありがとうございます。
オンクリックの方はユーザーがボタンを押した時に選択状態になるようにしたかったのでこのようにしました。

4：千田：2015/09/12 14:25:31

＜form>
＜p>＜input type="button" value="文字列を全部選択する" onClick="bb.focus();bb.select()">＜/p>
＜textarea name="bb">ボタンがクリックされると、このテキストエリア内の文字列が選択されます。＜/textarea>
＜/form>

5：千田：2015/09/12 14:43:15

再度お世話になります。
上記のソースを見ていただけませんか。
タグが使用できなかったので、全角＜を代用使用しましたが、全角＞は使用しなかったので、少し見づらくなりました。
上記の方法だと、javascriptのソース無しで、ボタンクリックで全選択が可能です。

6：管理人：2015/09/13 22:28:29

千田さんコメントありがとうございます。
実際に試して正常に動作することを確認しました。

私の場合はonClickで関数の呼び出しを、別の場所にその関数を記述していますが、
千田さんの場合はonClickの場所に直接スクリプトを書いているので、コンパクトで使用しやすくていいですね！

次回からこっちを使わせてもらいます！

コメントフォーム

テキストエリアの作成

javascriptの記述

サンプルプログラム

マウスオーバーされた時に選択状態にする

関連してそうなオススメ記事

コメント