jQuery : 文字列を「ダブルクリック」で全選択する

下のように、ダブルクリックすると中に書かれている文字列を全て選択するような、HTML+jQueryのコードを解説。

※ 下の<pre>要素の場合、スマホなどでは全選択しません。

[○] ダブルクリックすると、
書かれている文字列を 全選択します。
[×] デフォルトなので
全選択しません。

step 0

HTMLファイルのテンプレートからスタート。

step 1

※ この設定は見やすくするためだけであり、本質的な内容ではない

<body>要素のフォントの大きさ(font-size)を変更し、背景色(background)を変える。

[ 実行結果 (空の画面) ]

■ 全コードを表示する
<style> body { font-size: x-large; background: lightgoldenrodyellow; } </style>
■ 全コードを表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
</style>
</head>
<body>
<div id="container">

</div>

</body>
</html>

step 2

3つのエリアを作る。

  • 1つ目は、<form>要素内の<textarea>要素。
  • 2つ目は、<div>要素。
  • 3つ目は、<pre>要素。

<form>要素/<div>要素/<pre>要素の クラス(class属性)をsampleにする。

<textarea>要素/<div>要素/<pre>要素の中に、 「This is sample (改行) あいうえお アイウエオ」の文字列を入れる。 なお、<div>要素の場合、改行は無視されるので、 <br>要素で改行をしておく。

また、sampleクラスのスタイルを<style>要素内で定義しておく。

[ 実行結果 : 3つのエリアができる ]

■ 全コードを表示する
.sample { margin: 15px 5px; padding: 10px; border: 3px solid gray; background: lavender; }
■ 全コードを表示する
<p>form</p> <form action="#" method="POST" class="sample"> <textarea name="ta" cols="30" rows="3"> This is sample あいうえお アイウエオ </textarea> </form> <p>div</p> <div class="sample"> This is sample<br> あいうえお アイウエオ </div> <p>pre</p> <pre class="sample"> This is sample あいうえお アイウエオ </pre>
■ 全コードを表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.sample {
		margin:				15px 5px;
		padding:			10px;
		border:				3px solid gray;
		background:			lavender;
}
</style>
</head>
<body>
<div id="container">

<p>form</p>
<form action="#" method="POST" class="sample">
<textarea name="ta" cols="30" rows="3">
This is sample
あいうえお	アイウエオ
</textarea>
</form>

<p>div</p>
<div class="sample">
This is sample<br>
あいうえお	アイウエオ
</div>

<p>pre</p>
<pre class="sample">
This is sample
あいうえお	アイウエオ
</pre>

</div>

</body>
</html>

step 3

<textarea>要素/<div>要素/<pre>要素に、 それぞれid(id属性)を、一意に指定する。

なお、以降のjQueryで処理の適用先を指定するために使うので、重複しなければ なんでも良い。

[ 実行結果 : id を指定しただけなので、見た目は同じ ]

■ 全コードを表示する
<textarea name="ta" cols="30" rows="3" id="ta100">
■ 全コードを表示する
<div class="sample" id="div100">
■ 全コードを表示する
<pre class="sample" id="pre100">
■ 全コードを表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.sample {
		margin:				15px 5px;
		padding:			10px;
		border:				3px solid gray;
		background:			lavender;
}
</style>
</head>
<body>
<div id="container">

<p>form</p>
<form action="#" method="POST" class="sample">
<textarea name="ta" cols="30" rows="3" id="ta100">
This is sample
あいうえお	アイウエオ
</textarea>
</form>

<p>div</p>
<div class="sample" id="div100">
This is sample<br>
あいうえお	アイウエオ
</div>

<p>pre</p>
<pre class="sample" id="pre100">
This is sample
あいうえお	アイウエオ
</pre>

</div>

</body>
</html>

step 4

まず、<textarea>要素(id="ta100")に対するjQueryのコードを書く。

1つ目の<script>要素は、jQueryのライブラリを読み込んでいるだけ。

2つ目の<script>要素内のコードが実際のjQueryのコード。 #ta100(id="ta100")の要素がダブルクリック(dblclick)された時に、その要素($(this))を選択せよ(select())という意味。

下のリンクの実行例で、テキストエリア(<textarea>)内でダブルクリックすると、文字列が全選択されます。

[ 実行結果 : テキストエリアをダブルクリック ]

■ 全コードを表示する
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> /* jQuery */ $(function() { $("#ta100").dblclick(function(){ $(this).select(); }); }); </script>
■ 全コードを表示する
<textarea name="ta" cols="30" rows="3" id="ta100">
■ 全コードを表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.sample {
		margin:				15px 5px;
		padding:			10px;
		border:				3px solid gray;
		background:			lavender;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
	/* jQuery */
	$(function() {

		$("#ta100").dblclick(function(){
			$(this).select();
		});

	});
</script>


</head>
<body>
<div id="container">

<p>form</p>
<form action="#" method="POST" class="sample">
<textarea name="ta" cols="30" rows="3" id="ta100">
This is sample
あいうえお	アイウエオ
</textarea>
</form>

<p>div</p>
<div class="sample" id="div100">
This is sample<br>
あいうえお	アイウエオ
</div>

<p>pre</p>
<pre class="sample" id="pre100">
This is sample
あいうえお	アイウエオ
</pre>

</div>

</body>
</html>

なお、上でで良いのだが、下のように変えるとフォーカス(focus)した時にも、全選択できるようになる。

[ 実行結果 : フォーカスだけでも全選択 ]

■ 全コードを表示する
<script> /* jQuery */ $(function() { $("#ta100") .focus(function(){ $(this).select(); }) .dblclick(function(){ $(this).select(); }); }); </script>
■ 全コードを表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.sample {
		margin:				15px 5px;
		padding:			10px;
		border:				3px solid gray;
		background:			lavender;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
	/* jQuery */
	$(function() {

		$("#ta100")
			.focus(function(){
				$(this).select();
			})
			.dblclick(function(){
				$(this).select();
			});

	});
</script>

</head>
<body>
<div id="container">

<p>form</p>
<form action="#" method="POST" class="sample">
<textarea name="ta" cols="30" rows="3" id="ta100">
This is sample
あいうえお	アイウエオ
</textarea>
</form>

<p>div</p>
<div class="sample" id="div100">
This is sample<br>
あいうえお	アイウエオ
</div>

<p>pre</p>
<pre class="sample" id="pre100">
This is sample
あいうえお	アイウエオ
</pre>

</div>

</body>
</html>

step 5

次に、<div>要素と<pre>要素に対するjQueryのコードを書く。 2つをまとめて扱うため、、id(id属性)は無く、クラス(class属性)のsampleを対象にする。

sampleクラス(”.sample“)がダブルクリック(dblclick)された時に、 id属性(attr(“id”))を取得し、空で無ければ(idname !== undefined)文字列を選択する(JavaScriptの詳細説明は省略)。

なお、sampleクラスを対象にしているので、<form>要素も処理の対象となるが、 id属性が未指定なので、空になり(idname === undefined)処理は実行されない。

また、Step 4 で書いた「.select();」の関数は、フォーム部品(<input><textarea>など)以外では機能しない。

[ 実行結果 : <div><pre>でも全選択可能 ]

■ 全コードを表示する
$(".sample").dblclick(function(){ var idname = $(this).attr("id"); if (idname !== undefined) { var range = document.createRange(); var element = document.getElementById(idname); range.selectNodeContents(element); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } });
■ 全コードを表示する
<div class="sample" id="div100">
■ 全コードを表示する
<pre class="sample" id="pre100">
■ 全コードを表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.sample {
		margin:				15px 5px;
		padding:			10px;
		border:				3px solid gray;
		background:			lavender;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
	/* jQuery */
	$(function() {

		$("#ta100")
			.focus(function(){
				$(this).select();
			})
			.dblclick(function(){
				$(this).select();
			});

		$(".sample").dblclick(function(){
			var idname = $(this).attr("id"); 
			if (idname !== undefined) {
				var range = document.createRange();
				var element = document.getElementById(idname);
				range.selectNodeContents(element);
				var selection = window.getSelection();
				selection.removeAllRanges();
				selection.addRange(range);
			}
		});

	});
</script>


</head>
<body>
<div id="container">

<p>form</p>
<form action="#" method="POST" class="sample">
<textarea name="ta" cols="30" rows="3" id="ta100">
This is sample
あいうえお	アイウエオ
</textarea>
</form>

<p>div</p>
<div class="sample" id="div100">
This is sample<br>
あいうえお	アイウエオ
</div>

<p>pre</p>
<pre class="sample" id="pre100">
This is sample
あいうえお	アイウエオ
</pre>

</div>

</body>
</html>

step 6

最後に<textarea>要素/<div>要素/<pre>要素の title属性に「ダブルクリックで全選択」を指定しておく。そうすると、マウスオーバーの時に「ダブルクリックで全選択」というツールチップが表示される。

[ 実行結果 : ツールチップを設定して、完成! ]

■ 全コードを表示する
<textarea name="ta" cols="30" rows="3" id="ta100" title="ダブルクリックで全選択">
■ 全コードを表示する
<div class="sample" id="div100" title="ダブルクリックで全選択">
■ 全コードを表示する
<pre class="sample" id="pre100" title="ダブルクリックで全選択">
■ 全コードを表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<style>
body {
		font-size:			x-large;
		background:			lightgoldenrodyellow;
}
.sample {
		margin:				15px 5px;
		padding:			10px;
		border:				3px solid gray;
		background:			lavender;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
	/* jQuery */
	$(function() {

		$("#ta100")
			.focus(function(){
				$(this).select();
			})
			.dblclick(function(){
				$(this).select();
			});

		$(".sample").dblclick(function(){
			var idname = $(this).attr("id"); 
			if (idname !== undefined) {
				var range = document.createRange();
				var element = document.getElementById(idname);
				range.selectNodeContents(element);
				var selection = window.getSelection();
				selection.removeAllRanges();
				selection.addRange(range);
			}
		});

	});
</script>


</head>
<body>
<div id="container">

<p>form</p>
<form action="#" method="POST" class="sample">
<textarea name="ta" cols="30" rows="3" id="ta100" title="ダブルクリックで全選択">
This is sample
あいうえお	アイウエオ
</textarea>
</form>

<p>div</p>
<div class="sample" id="div100" title="ダブルクリックで全選択">
This is sample<br>
あいうえお	アイウエオ
</div>

<p>pre</p>
<pre class="sample" id="pre100" title="ダブルクリックで全選択">
This is sample
あいうえお	アイウエオ
</pre>

</div>

</body>
</html>

以上。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA