前言

中國信託信用卡的線上帳單查詢頁面會要求使用者填寫基本資料以供驗證。

每次都要重新輸入有些不便，於是開始研究能不能使用 JavaScript 書籤自動填入基本資料。

實作過程

input 填入

分析了網頁的 HTML 後發現，輸入框是個input標籤，也包含了id屬性。

以「身分證字號（末6碼）」數入框為例，其id為idno：

<input type="tel" class="form-control required idno ng-pristine ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength ng-touched" placeholder="例：456789" ng-minlength="6" ng-maxlength="6" maxlength="6" ng-model="verify.input.idno" id="idno" name="idno" autocomplete="off" required="" key-control="" style="">

利用 JS 可以很輕易的更改input標籤的值：

document.getElementById("idno").value = "123456";

執行後，輸入框與預想的一樣，變成了 123456，但提交表單卻出現該欄位未填寫的警告。

Angular

為了解決上述警告，我留意到input標籤中包含了ng-model屬性。

ng-model是一款名為 Angular 的 JS 函式庫的屬性，其用途是將input的值與 JS 的變數綁定。

也就是說，表單是否填寫完成是由 Angular 函式庫做判斷，只更改input的值是無法觸發更新變數的。

為了要模擬真實輸入，必須在更改值後，讓input冒個泡泡觸發更新變數：

var event = new Event('input',{'bubbles': true,'cancelable': true});
document.getElementById("idno").value = "123456";
document.getElementById("idno").dispatchEvent(event);

這樣就成功解決欄位未填寫的警告了。

點選 label

於欄位「新台幣帳單繳款方式是否為自動扣繳」中有個label標籤需要點選：

<label class="btn btn-default payMethod ng-pristine ng-untouched ng-invalid ng-invalid-required" ng-model="verify.input.payMethod" uib-btn-radio="'1'" required="" for="payMethod">否</label>

沒有id屬性，所以右鍵→Copy JS path取得 JS 絕對位置後，直接上click()事件：

document.querySelector("#verifyForm > div.form-group.input-inline.block-payMethod > div > label:nth-child(2)").click();

作成書籤

javascript:(function(){
var event = new Event('input',{'bubbles': true,'cancelable': true});
document.getElementById("idno").value = "123456";
document.getElementById("year").value = "1900";
document.getElementById("month").value = "01";
document.getElementById("day").value = "01";
document.getElementById("idno").dispatchEvent(event);
document.getElementById("year").dispatchEvent(event);
document.getElementById("month").dispatchEvent(event);
document.getElementById("day").dispatchEvent(event);
document.querySelector("#verifyForm > div.form-group.input-inline.block-payMethod > div > label:nth-child(2)").click();
})()