Setting document.activeElement.value shows value on screen but fails to accept

Question

There is this web page: https://www.comed.com/Pages/default.aspx with a "Sign In" button in the top right corner. I am displaying this page from a UWP app (this is actually a JavaScript question) in a WebView control, and run a dynamic JavaScript script on this page (via a call to InvokeScriptAsync()) to automatically insert the login or password in the currently selected field. The script that runs is simply this:

document.activeElement.value='" + value + @"';

This works in the sense that the login or password shows correctly on the screen BUT when I click on the "Sign In" button the page is telling me "Username (Email Address) is required." and "Password is required.".

If instead I manually type in the SAME value (or use copy/paste) then I get no errors!

I get the same type of error on the MS Channel 9 login page, but most other login web pages do NOT have that issue.

The input fields have several event listeners like `input`, `mousedown` etc. attached to them. These probably tell whether or not someone has typed stuff in. This could be bad design or it could be for security reasons. You could try to [dispatch one of the attached events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent). You can right-click and inspect the input fields to see which events they have (the little `ev` button next to them). — Sebastian Simon, Jan 12 '17 at 18:28
What? *You* (the server) are filling the password automatically? *You* are not supposed to know the password! — Oriol, Jan 12 '17 at 19:24
Stack Overflow is not your personal debugger. We're trying to build a repository of good Q&As that will help people in the future. The absence of relevant code in your question makes it much less useful for the future (and that link will die at some point, which makes it useless too). See [mcve]. — Oriol, Jan 12 '17 at 19:25

score 0 · Accepted Answer · edited Jan 12 '17 at 18:29

0

Use this code $(document.activeElement).trigger('change') after setting the value.

edited Jan 12 '17 at 18:29

Sebastian Simon

18,263
7
55
75

answered Jan 12 '17 at 18:28

Landaida

134
2
8

1

Thanks Landaida, that was the most useful answer and that did the trick for the Comed.com login page. @Xufox, I'll research your post about events since I still have the same issue on the https://login.live.com signin page for Channel 9. I'll post an answer if I find out anything. – Jean-Marc Jan 12 '17 at 23:35

score 0 · Answer 2 · edited May 23 '17 at 12:33

In addition to the above answer, and to support different web pages, I ended up using some Javascript from Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript:

if ("createEvent" in document)
{
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    document.activeElement.dispatchEvent(evt);
}
else
{
    document.activeElement.fireEvent("onchange");
}

Setting document.activeElement.value shows value on screen but fails to accept

2 Answers2