クロスブラウザ問題は jQuery でもあるのね(preのテキスト全選択)

Crayon Syntax Highlighterを退役させたりとか全て Pygments 化したりとかからの流れで、「コピー&ペーストフレンドリ」へのさらなる取り組み、たる。

まず、何も措置しない場合の chrome と IE のそれぞれ(上が chrome、下が IE):

chrome の「行全選択」が悪いとは言わないんだけれども、IE のこの振る舞いは、イケてるなぁ…。

でな、「全選択ボタン」を提供するのがいいのか、ダブルクリックの振る舞いを常に全選択にするのか、は悩ましい問題なのである。だって、「行選択がダブルクリックで出来る」ことが快適な場合だってあるでしょ。(だので IE の振る舞いは気持ちいい。)ので、ひとまずは反応するイベントについての考慮は棚上げにし、イベントハンドラの方はやっときたいぞ、と思ったわけだ。

まぁ…苦労したわ。結構あらゆるところで苦労してる痕跡がインターネットでは結構みつかる。

答え書いちゃえば出来上がったものは「なんてことない」んだけれど、ここに至るまでに随分時間かかった(半日)。

こんなです:

 1 jQuery(function($) {
 2 
 3   function selectText(el) {
 4     var doc = document;
 5     if (doc.body.createTextRange) {
 6       var range = doc.body.createTextRange();
 7       range.moveToElementText(el);
 8       range.select();
 9     } else if (window.getSelection) {
10       var range = doc.createRange();
11       range.selectNodeContents(el);
12       var selection = window.getSelection();
13       selection.removeAllRanges();
14       selection.addRange(range);
15     }
16   }
17 
18   $(document).ready(function() {
19 
20     var div = $('.pygment .highlight');
21     var pre = div.find('pre');
22 
23     /* mainly for chrome...*/
24     pre.each(function (i) {
25       $(this).on('dblclick', function() { selectText(this); });
26       this.title = 'double-click to select all';
27     });
28     // ...snip...
29   });
30 });

やっててわかったことは、「あぁ、アタシってば、jQuery の $ を理解出来てないんだなぁ」てこと。「selectText」についてはあちこちで紹介されてて正解はずっと出てたんだが、これを「自分の jQuery コード」で使うようにするのに、selectText に何を渡せば良いのか、で苦心してしまった。

なお、上のスクリプトは WordPress に組み込みの jQuery が読み込まれていること前提です。

して、こうなった:

IE は改悪よねぇ、とは思う。chrome は快適になったわね。