フォームをクリックしたときに選択状態にする

フォームをクリックしたときに選択状態にする

フォームをクリックしたときに選択状態にする方法について調べました。

JavaScriptを使う方法とjQueryを使う方法があります。

JavaScript

サンプル

コード

クリックで選択したいテキスト領域に onclick="this.select(0,this.value.length)" と記述します。

<input value="クリックで選択します" onclick="this.select(0,this.value.length)" />
<textarea onclick="this.select(0,this.value.length)">
クリックで選択します
クリックで選択します
クリックで選択します
</textarea>

jQuery

サンプル

コード

jQuery本体を読み込んで、<head>タグ内か</body>タグ直前に以下のコードを記述します。

<script type="text/javascript"><!--
$(document).ready(function(){
	$('.selectAll')
		.focus(function(){
			$(this).select();
		})
		.click(function(){
			$(this).select();
			return false;
		});
});
//--></script>

クリックで選択したいテキスト領域には以下のように記述します。
今回は「selectAll」というclass属性を付けると適用されるようにしています。

<input value="クリックで全選択します" class="selectAll" />

<textarea class="selectAll">
クリックで全選択します
クリックで全選択します
クリックで全選択します
</textarea>

参考サイト

下のボタンを押すと拍手送信＆メッセージフォームが開きます。→WEB拍手お返事

関連記事