javascript - 如何从 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)调用函数的文本框在原始网站中有一个模糊，我不能弄乱它，否则它不会保存到服务器)

这是迄今为止我的所有代码:

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'))

或者直接在注入(inject)的 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();
}

参见Inject code in a page using a Content script这解释了页面代码和内容脚本代码的上下文之间的差异，并展示了如何在页面上下文中运行代码。