Hit-a-hintっぽい事をするJavascriptを書いてみた
最近更新頻度を保てなくて申し訳ございません。
Scalaでのテキストエディタ製作をサボって書いてみました。
Firefoxアドオン「Hit-a-hint」のように、リンクに番号を付けて、数字を入力すると、数字に対応するページに行くという感じです。
一応、Google Chromeでは動作すると思います。他のブラウザはテストしていません。
GreaseMonekey的な用途で使うつもりで書いたソースです。
hint関数を呼ぶとリンクに番号がついたりしてhit-a-hint状態になります。
ソースの中のコメントは少ないです。ごめんなさい。
一応以下にコードを載せておきます。
(function () { function hint () { // Hit-a-hintっぽいことをする var linktags = document.getElementsByTagName ("a"); for (var i = 0; i < linktags.length; i++) { // リンクに付け足す数字用のspanタグを作る var spantag = document.createElement ("span"); // 他のspanタグと区別できるようにclassをつける spantag.className = "hitahintnumber"; // 色を指定 spantag.style.backgroundColor = "#FFFF00"; spantag.style.color = "#000000"; // 中身の文字 spantag.innerText = i.toString (); // spanタグをリンクに追加 linktags[i].appendChild (spantag); } // 選択用の入力ボックスを表示する var input = document.createElement ("input"); input.type = "text"; input.style.position = "absolute"; input.style.bottom = "0px"; input.style.left = "0px"; input.onkeyup = function (e) { if (e.keyCode == 27) { // Escキーが押されたら元に戻す for (var i = 0; i < linktags.length; i++) { // リンクに付けた数字を消す var elem = linktags[i]; elem.removeChild (elem.getElementsByClassName ("hitahintnumber")[0]); } // 入力ボックスを消す document.body.removeChild (input); return; } if (e.keyCode == 13) { // Enterキーが押されたら入力ボックスの数字に対応するリンクに行く var num = parseInt (input.value); // リンクに行く前に入力ボックスの数字が正しいか確かめる if (isNaN (num)) { return; } // リンクに行く document.location = linktags[num]; return; } // 入力ボックスに値が入力された時の処理 str = input.value; var matchlist = new Array(0); // 入力された値に対応するリンクを探す for (var i = 0; i < linktags.length; i++) { if (i.toString ().match (new RegExp ("^" + str))) { // マッチしたリンクのリストに追加 matchlist.push (linktags[i]); } } if (matchlist.length == 1) { // マッチしたリンクが一つになったらそのリンクに行く document.location = matchlist[0].href; } } document.body.appendChild (input); input.focus () } hint (); }) ();