1

See the issue happening here:

https://gfycat.com/BelatedLawfulBighorn

The issue is that until the user interacts with the page (I just click inside the password field in this example), JavaScript can't read the password field if it is auto-filled by Chrome. Is this on my end? Is this some security feature built into Chrome?

To rule some things out, here's what I've tried and none have worked:

  • Using vanilla JS
  • Programmatically triggering a click somewhere on the page
  • Giving any of the input fields focus on page load
  • Giving any of the input fields focus on page load after a timeout of a few hundred milliseconds
Massenburger
  • 41
  • 6
  • This looks very similar to http://stackoverflow.com/questions/21158247/browser-chrome-firefox-jquery-val-does-not-work-for-autofilled-input-field . But what are you actually trying to do? If you're trying to get the password when the user clicks the log in button, then you could listen for the click event and get the value of the password input then. – evan_schmevan May 26 '16 at 18:47
  • No, not via the login button. I auto-focus the username field, so a lot of users try and just hit "enter" to log in. When trying to get the value of the password field when only "enter" is hit, it's blank. I know that I could just remove the auto-focus, and force them to click login, but I don't want to solve the problem by making it harder for my users. – Massenburger May 26 '16 at 19:04

2 Answers2

1

Solved my own problem!

If I put everything inside a form, and instead of listening for the "enter" keydown event, I just listened for the "submit" event on the form, then JavaScript could read the value of my password field.

Massenburger
  • 41
  • 6
0

It is not possible to read the values until the user interacts with the page.

The reason is, that events have the isTrusted property. "The isTrusted read-only property of the Event interface is a Boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent()." (from https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted).

Chrome autofill values only become readable with a isTrusted=true event.

Note: window.scroll() always has isTrusted=true. But it doesnt make the autofill values readable!

Oli Dev
  • 69
  • 9