ウェブサイトのテキストボックスに文字列をセットしたり、リストボックスの選択肢を選んだりすることがありますが、いつも同じページで同じ作業をするのは苦痛です。
ブックマークレットを使うと自動化することができます。
ここではブックマークレットの作り方を説明します。
テキストボックス(idがある場合)
次の通り、テキストボックスが2個あるとします。
<input type="text" id="t1">
「id=”t1″」となっているテキストボックスに「あいうえお」とセットするには次のようにします。
「id=”t1″」となっているテキストボックスは、そのページには1個しかないので、「getElementById」を使ってピンポイントで特定できます。
※もし重複があれば最初の1個です。
テキストボックス(nameがある場合)
idがない場合があります。
実行(submit)ボタンを押すと、引数としてテキストボックスなどの値が使われます。それが何の値なのかは「name」で表わされるので、idがない場合でも、nameはあるはずです。
まず、「document.all」を使い、テキストボックスなどをしらみつぶしにチェックしてnameが一致するものを探すという方法が考えられます。
次のように、テキストボックスが3個あるとします。
<input type="text" name="t1">
<input type="text" name="t2">
「name=”t1″」となっているテキストボックスに「かきくけこ」とセットするには次のようにします。
for(i=0;i<arrs.length;i++){
if(arrs[i].name=="t1"){
arrs[i].value="かきくけこ";
}
}
「arrs=document.all;」で、すべてのオブジェクトを配列で取得します。
順にチェックしてnameが「t1」であるオブジェクトを見付けます。
見付けたらvalueに「かきくけこ」を入力します。
また「getElementsByName」を使い、nameが一致するものだけを取得する方法があります。
for(i=0;i<arrs.length;i++){
arrs[i].value="かきくけこ";
}
そのページでnameが一致するものが一つしかないと分かっている場合はforを使わず、「arrs[0].value=”かきくけこ”」とする方法もあります。
リストボックス
次の通り、選択肢が3個のリストボックスがあるとします。
<option>op0</option>
<option>op1</option>
<option>op2</option>
</select>
「op1」を選択するには次のようにします。
for(i=0;i<arrs.length;i++){
if(arrs[i].text=="op1"){
arrs[i].selected=true;
}
}
「arrs=document.all;」で、すべてのオブジェクトを配列で取得します。
順にチェックしてtext(実際に表示される文字列)が「op1」であるオブジェクトを見付けます。
見付けたらselectedにtrueを入力し、選択状態にします。
ブックマークレットに変換
このようにして書いたコードをブックマークレット用に変換します。
- 前後に「javascript:(function(){」と「})();」を付け加えます。
- 改行とタブを削除します。
例
for(i=0;i<arrs.length;i++){
if(arrs[i].text=="op1"){
arrs[i].selected=true;
}
}
上が元のコードです。
arrs=document.all;
for(i=0;i<arrs.length;i++){
if(arrs[i].text=="op1"){
arrs[i].selected=true;
}
}
})();
前に「javascript:(function(){」、後に「})();」を付けます。
タブを削除します。
上のコードは見やすさのために改行を残していますが、実際には改行を削除します。
通常はこれで十分ですが、ダメな場合は記号等をエンコードしてください。例えばダブルクォーテーションは「%22」、スペースは「%20」に置換します。
エンコードするためには、乱暴ですが、Googleで「検索」する方法があります。
文字列を検索窓に貼り付けて「検索」ボタンを押します。アドレス欄に「q=●●●」と表示されます(表示されないときはテキストエディタなどにコピー＆ペースト)。「●●●」の部分がエンコード後の文字列です。
コメント
こんにちは。
>nameについては「getElementById」に相当するものがありません
とお書きですが、getElementsByNameがありますよ。
下記のようにname属性を指定して要素の配列を参照できます。
document.getElementsByName(“t1″)(0).value=”かきくけこ”;
通りすがりさん
ご指摘ありがとうございます。
後で補足しておきます。
当時知らなかったのか思い込みがあったのか。
はじめまして。大変勉強になるページを作成していただき、ありがとうございます。
さて、私なりに作成してみたのですが、丸無視です。
申し訳ないのですが、どこが間違っているのか、
またどのようにしてElementByIdもしくはNameを探されるのかを教えていただけますでしょうか。
伴って、最終的なlog inのボタンは、clickであったり、submitであったりします。
どこを見れば、その違いがわかるのでしょうか？
お忙しいところ、恐れ入りますが、教えていただけますでしょうか？
サイト上の…
…に対して、
javascript:(function(){
var addr=’my_number’;
var pass=’my_password’;
document.getElementByname(“Ecom_User_ID”).value=addr;
document.getElementByname(“Ecom_Password”).value=pass;
document.getElementsByID(“loginButton”)[0].submit();
})();
と、書いてみました。動きません。
よろしくお願いします。
＞Hayana emiさん
まず確認したいのは、大文字と小文字です。ById、ByNameです。
次は、getElementByIdは「s」を付けません。getElementsByNameは「s」を付けます。
getElementByIdは一つのオブジェクトを拾うので[0]のように指定する必要がありません。上の「idがある場合」です。
逆にgetElementsByNameは複数のオブジェクトを拾うので[0]のように指定する必要があります。上の「nameがある場合」です。
ボタンについては試したことがないのですが、submit()はformに対して実行、click()はinnput(type=button)に対して実行、という使い分けだと思います。