ワテの場合、ASP.NET Form や ASP.NET MVC を駆使して各種の無料便利ツールを世間に公開している。
そのツール群はここにある。
その中でも
パスワード自動生成 便利サイト
はとっても便利で使い易いと思っている。
このパスワード自動生成（改良版）では、一瞬にして、5文字から255文字までのランダムなパスワードを生成出来る。
- 英数字のみ
- 英数字、記号混在
- 英数字、記号混在（特定の記号のみ指定）
などのオプションがあるので、利用者の皆さんの必要とするパスワードが一瞬で生成出来るのだ。
例えば英数字と記号の #@& のみを使って16文字のパスワードを生成したい。
JWN@&uirRvbeuRbk
こんなふうに生成出来る。
さて、そんなワテのパスワード自動生成（改良版）のサイトでは、生成したパスワード文字列をクリックしただけで全選択出来る機能を入れている。
当記事では、そのテクニックを紹介したい。
十数行のjQueryコードで実現出来る。
以下では、実際デモをお見せするところから始めたい。
なお、テスト環境は以下の通り。
- Windows 10 x64 Professional
- Visual Studio 2017 Community
- .Net Frameworkバージョン 4.6.2
- C#コンソールプロジェクト
では、本題に入ろう。
div内をシングルクリックで文字列全選択のデモを試す
実際に試してみたい人は下のパスワード文字列をシングルクリックしてみて下さい。
| 14 | LrYNTBgLy5MhnM |
| 15 | huFi#iVx9gw#tvX |
| 16 | JWN@&uirRvbeuRbk |
| 17 | HZvP6stZdHrGyi8EV |
| 18 | muJq#guXKkE&TLCe8V |
無事にパスワード文字列が選択出来たでしょうか？
あとはそれを右クリックでコピーして利用して頂ければ良いのである。
Chrome、Firefox、IE、Edgeでは正しく動作する事は確認済だ。
このようにユーザーフレンドリーなユーザーインターフェースを心掛けているにも関わらず、全く利用者さんの来ないワテ自作のパスワード自動生成サイトであるが、不人気な理由は分からない。
もし分る人は教えて下さい。
さて、本題に戻ろう。
div内クリックで文字列が全選択出来る（はずの）デモ
どうでしょうか？
無事に選択出来たでしょうか？
div内クリックで文字列全選択するHTMLソースコード
その全ソースコード。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<!--<script src="jquery-3.1.1.js"></script>-->
</head>
<body>
<div class="text-select-class">
このdivをクリックすると文字列が全選択出来る。
</div>
<div>
このdivは選択出来ない。
</div>
<div class="text-select-class">
このdivをクリックすると文字列が全選択出来る。
</div>
<script>
$('div.text-select-class').on('click', function (e) {
//e.preventDefault();
select_all(this);
var divJQ = $(this);
var text = divJQ.text();
alert(text);
});
function select_all(el) {
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
}
}
</script>
<style>
div {
width: 200px;
height: 100px;
text-align: center;
margin: 30px;
}
div:nth-child(2n+1) {
border: 2px solid red;
}
div:nth-child(2n) {
border: 2px solid green;
}
</style>
</body>
</html>
即席で作ったので、突っ込みどころも多いかもしれない。
何かお気付きの点がありましたら、どしどしご指摘下さい。
もしご自身でも試してみたい人は、上のHTMLの全体をコピペして test.html などのファイル名で保存すると良いでしょう。
その場合には、文字コードは UTF-8 BOM有りにすると良いです。
他のコードなどでは文字化けする場合があります。
かつ、ファイルの冒頭で jquery-3.1.1.js をjQueryのサイトから読み込んでいますが、最近のブラウザーではセキュリティ制約があり、その部分が実行出来ません。
ですので、事前に
http://code.jquery.com/jquery-3.1.1.js
からダウンロードしておいて、test.html ファイルと同じフォルダに保管しておきます。
次に、そのローカルに保存した jQuery を使うために以下のように書き換えます。
<!--<script src="//code.jquery.com/jquery-3.1.1.js"></script>--> <script src="jquery-3.1.1.js"></script>
これで準備完了です。
あとは、その text.html ファイルをダブルクリックするなどでブラウザーで開くとこのページにあるのと同じ赤いdiv二個と緑のdivが一個表示されるでしょう。
無事に表示されたらクリックして文字列が全選択出来るかどうか試して下さい。
プログラムの説明
まずは前半部分。
$('div.text-select-class').on('click', function (e) {
//e.preventDefault();
select_all(this);
var divJQ = $(this);
var text = divJQ.text();
alert(text);
});
約一年半前のワテは、JavaScriptもjQueryも全く未経験だった。
なので、この数行のJavaScriptとjQueryがミックスしたコードすら理解出来なかった。
さて、jQueryとはJavaScriptで記述されている便利なライブラリーだ。
$記号あるいは jQuery と言う単語を使って記述する。
WEBプログラミングの世界では JavaScript や jQuery が良く使われる。上のコードは先ずは、
$('div.text-select-class').on('click', function (e) {
...
});
で始まっている。
jQueryのセレクターやイベントハンドラ
これは何かと言うと、div要素のうちtext-select-classと言う名前のクラスを持つものを選択すると言う意味だ。
この文字列は
'div.text-select-class'
セレクターと呼ばれて、
$('セレクターの文字列')
先頭にjQueryを表す $ を付けるとこの式はHTMLファイルの中を調べて
<div class="text-select-class" > ・・・・・・</div>
の形式のdiv要素を全部取得すると言う感じ。
なお、クラスと言う名前が出て来るが、プログラミングの世界のクラスとは全く無関係だ。
どちらかと言うと2年A組のクラスと言う場合のクラスに近いかな。
つまり、クラスと言うよりカテゴリーと言う感じか。
さて、その div がクリックされた場合のイベントハンドラが function(e) { … } の部分だ。
その中でまず、文字列を全選択する別関数をコール。
select_all(this);
この場合の this は今クリックされた div要素自身を指す。
次に、その this を $(this) としてjQueryオブジェクト化している。
var divJQ = $(this);
詳しい説明は教科書を読んで頂くとして、兎に角このようにしてやると、thisつまり今はクリックされた div要素に対して、各種のオペレーションが可能になる。
具体的には、その後にやっているこの部分。
var text = divJQ.text(); alert(text);
.text() は jQueryの関数。その要素内にある文字列を取得する関数だ。
そのようにして取得したtext文字列を JavaScriptのalert関数でポップアップメッセージとして表示している。
まあ、ここまではJavaScriptやjQueryを知っている人なら誰でも知っている話題だ。
次に後半部分
指定したHTML要素の文字列を選択する関数
function select_all(el) {
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
}
}
この関数は、かなり前にどこかネットで見付けたサンプルプログラムだ。
機能としては、引数で与えられたHTML要素に対して、その中味の文字列を選択する関数だ。
で、ワテの場合、ネットで見付けて適当にコピペして使っていたので詳しい意味は実は今日まで知らなんだ。
それで今日詳しく見てみたら、HTML要素のテキストを選択する機能はブラウザーによってサポートしている関数が異なるので、まずそれを調べているようだ。
それが二カ所のif文。
if文の中ではそれぞれの関数が undefined でない場合に限り選択機能を実行している。
合計四つのundefinedチェックがあるのでそれを各ブラウザーでのサポート状況を調べてみた。
その結果は以下の通り。
|
Internet Explorer 11.1066.14393.0
|
Chrome 57.0.2987.133 (64-bit) |
Firefox 53.0 (64 ビット) |
Edge 38.14393.1066.0 |
|
| window.getSelection | ● | ● | ● | ● |
| document.createRange | ● | ● | ● | ● |
| document.selection | × | × | × | × |
| document.body.createTextRange | ● | × | × | × |
ちなみに確認に使ったプログラムは以下の通り。
<script>
function テキスト選択機能が動くかどうか確認する関数() {
var f1_window_getSelection = typeof window.getSelection != "undefined";
var f2_document_createRange = typeof document.createRange != "undefined";
var f3_document_selection = typeof document.selection != "undefined";
var f4_document_body_createTextRange = typeof document.body.createTextRange != "undefined";
var CRLF = '\r\n';
var msg = '利用出来るかどうか判定結果' + CRLF
+ 'window.getSelection =' + (f1_window_getSelection ? '●' : '×') + CRLF
+ 'document.createRange =' + (f2_document_createRange ? '●' : '×') + CRLF
+ 'document.selection =' + (f3_document_selection ? '●' : '×') + CRLF
+ 'document.body.createTextRange =' + (f4_document_body_createTextRange ? '●' : '×')
;
alert(msg);
}
テキスト選択機能が動くかどうか確認する関数();
</script>
と言う事で、2017年4月26日現在では主要な四つのブラウザーは最初の二つの機能（window.getSelectionとdocument.createRange）をサポートしているので、select_all関数では、最初のifブロックが実行されるようだ（以下に再び引用する）。
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if
この処理の詳しい説明は、各自教科書を読んで貰うとして、兎に角、今までコピペで適当に利用していた関数の意味が大体分った。
まとめ
DIV要素をクリックしたら、その内部の文字列を全選択する手法を紹介した。
jQueryを使用するバージョンである。
ネット検索すると、他にもいろんな手法があるようだが、ワテの場合は上で紹介した関数をよく利用している。
主要四ブラウザーで正しく動作するので安心感がある。
この関数を応用すれば、マウスクリックではなくてマウスオーバーしただけで選択するなどの機能も簡単に実装出来る。
と言う事で、今回の記事は終わり。
jQueryの本を読む
どれも人気の高い本だ。
特に二番目に紹介している本は、山田 祥寛さんの著作だ。
山田さんは、WEBプログラミング系だけではなくVisual Studio関連の解説本なども多く執筆しておられる人だ。何でも出来る人のようである。
コメント