Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

フォームの自動入力をサポートしてくれるブックマークレットを作った

フォームのテストをする際に毎回同じ項目を入力していませんか?とてもめんどくさいですよね?そこで今回は、フォームへの自動入力をサポートしてくれるブックマークレットを作りました。
使い方を説明していきます。

1. まずはブックマークレットを追加


まずは上のボタンを下の図のようにドラッグアンドドロップでブックマークに追加してください。


2. 普段通りフォームに値を入力

次に自動入力したいフォームに移動し、自動入力したいフォームにまずは普通に値を入力してください。


3. ブックマークレットを起動

先ほど入力したブックマークレットをクリックし、起動してください。
そして、下の図のように自動入力したいフォームのクラス名ID名もしくは要素名をjQueryでセレクタを指定するのと同じ要領で入力してください。
次に、JSONデータの取得ボタンを押すと、フォームに入力された情報がJSON形式で、テキストエリアに出力されます。


4. データ保存をクリック

つぎに、データ保存をクリックしてください。なにもおこりませんがこれでしっかりローカルストレージに保存されています。

5. データロードをクリックして、データを自動入力をクリック

最後に、開いているベージをリロードしてデータロードをクリックしてみてください。先ほど登録した情報が、テキストエリアに出力されます。
その状態でデータを自動入力をクリックしてください。
無事データがフォームに自動入力されるはずです。
なお、テキストエリアのデータを変更すると、変更したデータもフォームの自動入力に反映されます。

ローカルストレージについて

なお、このブックマークレットでは、取得したフォームを現在のURLのパスネーム+取得したフォームのセレクタ名で保存するので、フォーム毎に別々のデータとしてご利用していただけます。

Github

なお、このブックマークレットのソースはGithubでも公開しています。
ぜひご利用下さい。



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド