ホーム > JavaScript > 自動入力のためのブックマークレットの作り方

自動入力のためのブックマークレットの作り方

2010 年 5 月 28 日 コメントをどうぞ コメント
このエントリーをはてなブックマークに追加
Bookmark this on Yahoo Bookmark

ウェブサイトのテキストボックスに文字列をセットしたり、リストボックスの選択肢を選んだりすることがありますが、いつも同じページで同じ作業をするのは苦痛です。
ブックマークレットを使うと自動化することができます。
ここではブックマークレットの作り方を説明します。

テキストボックス(idがある場合)

次の通り、テキストボックスが2個あるとします。

<input type=”text” id=”t0″>
<input type=”text” id=”t1″>

「id=”t1″」となっているテキストボックスに「あいうえお」とセットするには次のようにします。

document.getElementById("t1").value="あいうえお";

「id=”t1″」となっているテキストボックスは、そのページには1個しかないので、「getElementById」を使ってピンポイントで特定できます。
※もし重複があれば最初の1個です。

テキストボックス(nameがある場合)

idがない場合があります。
実行(submit)ボタンを押すと、引数としてテキストボックスなどの値が使われます。それが何の値なのかは「name」で表わされるので、idがない場合でも、nameはあるはずです。

ところがnameについては「getElementById」に相当するものがありません。
そこでテキストボックスなどをしらみつぶしにチェックしてnameが一致するものを探すという方法になります。

次の通り、テキストボックスが2個あるとします。

<input type=”text” name=”t0″>
<input type=text name=”t1″>

「name=”t1″」となっているテキストボックスに「かきくけこ」とセットするには次のようにします。

arrs=document.all;
for(i=0;i&lt;arrs.length;i++){
    if(arrs[i].name=="t1"){
        arrs[i].value="かきくけこ";
    }
}

「arrs=document.all;」で、すべてのオブジェクトを配列で取得します。
順にチェックしてnameが「t1」であるオブジェクトを見付けます。
見付けたらvalueに「かきくけこ」を入力します。

リストボックス

次の通り、選択肢が3個のリストボックスがあるとします。

<select>
<option>op0</option>
<option>op1</option>
<option>op2</option>
</select>

「op1」を選択するには次のようにします。

for(i=0;i&lt;arrs.length;i++){
    if(arrs[i].text=="op1"){
        arrs[i].selected=true;
    }
}

「arrs=document.all;」で、すべてのオブジェクトを配列で取得します。
順にチェックしてtext(実際に表示される文字列)が「op1」であるオブジェクトを見付けます。
見付けたらselectedにtrueを入力し、選択状態にします。

ブックマークレットに変換

このようにして書いたコードをブックマークレット用に変換します。
(1)改行とタブを削除します。
(2)前後に「javascript:(function(){」と「})();」を付け加えます。

元のコード。

for(i=0;i&lt;arrs.length;i++){
    if(arrs[i].text=="op1"){
        arrs[i].selected=true;
    }
}

改行とタブを削除。

for(i=0;i&lt;arrs.length;i++){if(arrs[i].text=="op1"){arrs[i].selected=true;}}

前後に付加。

javascript:(function(){for(i=0;i&lt;arrs.length;i++){if(arrs[i].text=="op1"){arrs[i].selected=true;}}})();

通常はこれで十分ですがダメな場合は記号等をエンコードしてください。例えば「”」は「%22」に置換します。
エンコードするためには、乱暴ですが、Googleで「検索」する方法があります。
文字列を検索窓に貼り付けて「検索」ボタンを押します。アドレス欄に「q=●●●」と表示されます。「●●●」の部分がエンコード後の文字列です。

  1. コメントはまだありません。
  1. トラックバックはまだありません。