在 SPA 網頁中模擬用戶輸入

發表於 更新於 分類於

在 SPA 環境下單純抓 DOM 並修改 value 沒辦法觸發資料更新
花了一點時間找到解決辦法，記錄一下。

在 Vue 中使用 input 表單通常會使用到語法糖 v-model，今天我在寫一個簡單的登入腳本時發現單純抓 DOM 並沒辦法觸發 input 函數來使資料更新，查了一下解決辦法是要在更新資料後手動呼叫 input 函數就可以了。

另外也學習了手動呼叫 addEventListener 方法

1
<button id="myBtn">按我</button>
1
2
3
4
5
6
7
8
// 宣告按鈕的觸發事件
const myBtn = document.querySelector("#myBtn");
myBtn.addEventListener("click", myclick);

// 觸發的執行函式
function myclick() {
  alert("觸發！");
}

當我們想要在其他地方觸發這個事件的時候，例如最簡單的情境，就是讀取時直接觸發。

我們可以用 JavaScript 這樣寫：

1
2
3
// 自動觸發點擊事件 dispatchEvent
const event = new Event("click"); // 創建一個該元素綁定的事件
myBtn.dispatchEvent(event); // 直接觸發

其中，new Event(“事件”)，Event 括號裡面的事件，是要與原綁定的 addEventListener 事件相同。也就是說，如果原本綁定的是 change 事件，那麼 Event 括號裡面也要使用 change 事件。

這份範例程式碼呈現的結果，就是讀取檔案之後，會立即觸發一次 myclick() 函式。

套用上面教學範例可以修改成一個簡易的登入程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 定義要填入的資料
const Company = 'apple'; // 公司代碼
const Employee = '0001'; // 員工編號
const Password = '123456'; // 密碼

    // 簡化選擇元素和分配值的函數
    function setInputValue(name, value) {
        let input = document.getElementsByName(name)[0];
        if (input) {
            input.value = value;
            //手動觸發input event
            input.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: true }));
        }
    }

    // 設置各個欄位的值
    setInputValue("inputCompany", Company);
    setInputValue("inputID", Employee);
    setInputValue("inputPassword", Password);