How to Call an OnBlur Method from a Chrome Extension

Question

I'm working on a Chrome extension that simply makes an owner account text box the same as a scheduling account textbox. The text boxes have onblur methods on the original website that, through a round-about way after calling many functions, save the data to the server.

When I change one text box, I set the other text box's value. That works visually. But the data is not saving to the network for the textbox I don't actually click on. (OwnerAccount is updated, Scheduling Account is not)

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

tbSchedulingAccount.value = tbOwnerAccount.value;

But now it's time to save the value to server. I thought simply blurring the scheduling account would call the onblur() method of tbSchedulingAccount. No dice.

tbSchedulingAccount.blur();

I also tried:

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

(with and without a blur at the end -- the user will naturally click somewhere, so if I can get the cursor in the tbSchedulingAccount textbox, it should blur on its own)

I tried calling the function using the Chrome console, and it works:

tbSchedulingAccount.onblur();

but I can't get it to actually blur out and call the function using tbSchedulingAccount.blur();

If it's any help, here's the element I'm trying to 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;">

So, my main question is:

• Can I call the onblur function from an extension when another textbox loses focus?

(I should note, the textbox I want to call the function from (tbOwnerAccount) has an onblur in the original website that I can't mess with or it won't save to the server)

Here's all of my code so far:

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>

}

Thanks for any help you can provide!

Answer 1

Try dispatching blur event:

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

Or run onblur() directly in an injected DOM-script:

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

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

See Inject code in a page using a Content script that explains differences between contexts of page code and content script code and shows how to run code in page context.