久しぶりに真面目な解説物を書いていきます。
今回は「jQueryのchangeイベントをVBAのDOM操作で発火させる方法」という事で・・・なんのこっちゃって所ですかね。
内容すっ飛ばして用途だけを先に書くと、これを使うことでネットショップの「BASE」(https://thebase.in/)を含めた色々なサイトで自動化ツールを作ることができる様になります。
ちなみにBASEに関してはAPIがある程度整備されていますので、わざわざDOM操作をする必要はあんまり無いんですが・・・それはまた別の機会に。
BASEを例にした実装例
それでは早速本題です。
今回は実際にBASEを例にして処理を組んでみます。
上図はBASEの商品編集画面となりますが、この編集画面中に実は1箇所だけjQueryのchangeイベントが設定されている箇所が存在します。
それは、『在庫数』項目の入力ボックスです。
(正確には種類と数量の2箇所)
まずは何も考えずに、商品名と在庫数の値を変更する処理を組んでみます。
ieBase.document.getElementById("mail").Value = "入力テスト"
※オブジェクト「ieBase」には、IEオブジェクトが格納されている事前提
この処理を実行すると、
ページ上の商品名の入力ボックスの内容が置き換わりました。
このまま登録ボタンを押してみると、
しっかり変更が反映されているのが確認できます。
同じ手順で在庫数を変更してみると、
見た目上は数値が変わります。
ですが、このまま登録ボタンを押すと・・・
先程入力したはずの在庫数「5」が反映されていません。
もちろんキーボードを使って入力したり、SendKeys処理で入力を行った場合は問題無く反映されています。
しかし、
ieBase.document.getElementById("ItemStock").Value = 5
この様にただValueの値を変更しただけでは、内部的に設定されているchangeイベントが発生せず、値が正常に反映されない状態となってしまいます。
という事でchangeイベントを強制的に発生させる処理を以下の様な形で組みます。
Dim evt As Object Set evt = ieBase.document.createEvent("HTMLEvents") evt.initEvent "change", True, False ieBase.document.getElementById("ItemStock").Value = 5 ieBase.document.getElementById("ItemStock").dispatchEvent evt
最初の3行は丸ごとコピーでOK。(ieBase.documentの所は要変更)
最後の「dispatchEvent evt」は、対象となるオブジェクトに対して使用して下さい。
上記コードで処理を行うことで、以下の様に正常に値が反映される様になります。
changeイベントの設定を確認する方法
今回「在庫数」の項目にchangeイベントが設定されている前提で話を進めましたが、他の箇所も含め設定の有無を簡単に確認する方法があります。
IE11を例にすると、対象となる入力ボックスの部分で右クリックから「要素の検査」を選択します。
すると画面下に上図の様なウィンドウが現れますので、右側の部分で「イベント」を選択することで、jQueryでchangeイベントが設定されているのが確認できます。
ちなみに商品名の箇所はこんな感じ。
こっちはイベントに何も設定されていないのが分かりますね。
こういう入力ボックスは基本valueの変更のみで反映されます。
今回は以上となります。
実の所この処理自体は他でも紹介されているんですが、具体的にどこで(どういう場面で)使えるのかって所が分からないと使い道に困るんですよね。
イベントの確認方法もあわせて、参考にしてみて下さい。