jQueryのchangeイベントをVBAのDOM操作で実行させる方法


久しぶりに真面目な解説物を書いていきます。

今回は「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の変更のみで反映されます。

今回は以上となります。

実の所この処理自体は他でも紹介されているんですが、具体的にどこで(どういう場面で)使えるのかって所が分からないと使い道に困るんですよね。

イベントの確認方法もあわせて、参考にしてみて下さい。

関連記事と広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする