如何從 Chrome 擴展程序調用 OnBlur 方法

Question

我正在開發一個 Chrome 擴展程序，它只是使所有者帳戶文本框與計划帳戶文本框相同。 文本框在原網站上有onblur方法，調用很多函數后，通過迂回的方式，將數據保存到服務器。

當我更改一個文本框時，我設置了另一個文本框的值。 這在視覺上有效。 但是數據沒有保存到我實際上沒有點擊的文本框的網絡中。 （OwnerAccount 已更新，Scheduling Account 未更新）

var tbOwnerAccount = document.getElementById("ctl00_ContentPlaceHolder1_txtOwnerAccountNumber");
var tbSchedulingAccount = document.getElementById("ctl00_ContentPlaceHolder1_txtSchedulingAccountNumber");

tbSchedulingAccount.value = tbOwnerAccount.value;

但是現在是時候將值保存到服務器了。 我認為簡單地模糊調度帳戶會調用 tbSchedulingAccount 的 onblur() 方法。 沒有骰子。

tbSchedulingAccount.blur();

我也試過：

tbSchedulingAccount.focus();
tbSchedulingAccount.select();
tbSchedulingAccount.value = tbOwnerAccount.value;

（最后有和沒有模糊 - 用戶自然會點擊某處，所以如果我可以在 tbSchedulingAccount 文本框中獲得光標，它應該自己模糊）

我嘗試使用 Chrome 控制台調用該函數，它工作正常：

tbSchedulingAccount.onblur();

但我無法讓它真正模糊並使用 tbSchedulingAccount.blur() 調用該函數；

如果有任何幫助，這是我試圖模糊的元素：

<input name="ctl00$ContentPlaceHolder1$txtSchedulingAccountNumber"
type="text" maxlength="25" id="ctl00_ContentPlaceHolder1_txtSchedulingAccountNumber"
tabindex="9" class="textbox" onblur=" MASSIVE PROPRIETARY FUNCTION"
onkeydown="javascript:if(event != null &amp;&amp; event.keyCode == 13){ 
MASSIVE PROPRIETARY FUNCTION" style="width:200px;">

所以，我的主要問題是：

• 當另一個文本框失去焦點時，我可以從擴展中調用 onblur 函數嗎？

（我應該注意，我想從 (tbOwnerAccount) 調用函數的文本框在原始網站中有一個 onblur，我不能弄亂它，否則它不會保存到服務器中）

到目前為止，這是我的所有代碼：

var tbOwnerAccount = document.getElementById("ctl00_ContentPlaceHolder1_txtOwnerAccountNumber");
tbOwnerAccount.onblur = updateSchedule;

function updateSchedule(){
    var tbOwnerAccount = document.getElementById("ctl00_ContentPlaceHolder1_txtOwnerAccountNumber");
    var tbSchedulingAccount = document.getElementById("ctl00_ContentPlaceHolder1_txtSchedulingAccountNumber");

    console.log("Fired");

    <CODE FOR THE ORIGINAL WEBSITE'S .ONBLUR ON tbSchedulingAccount TO FIRE>

}

感謝您的任何幫助，您可以提供！

Answer 1

嘗試調度blur事件：

tbOwnerAccount.dispatchEvent(new Event('blur'))

或者直接在注入的 DOM 腳本中運行onblur() ：

runDOMscript(function() {
    document.getElementById("ctl00_ContentPlaceHolder1_txtOwnerAccountNumber").onblur();
});

function runDOMscript(fn) {
    var script = document.head.appendChild(document.createElement('script'));
    script.text = '(' + fn + ')()';
    script.remove();
}

請參閱使用內容腳本在頁面中注入代碼，該腳本解釋了頁面代碼上下文與內容腳本代碼之間的差異，並展示了如何在頁面上下文中運行代碼。