4

I'm trying to detect when a browser places a saved username and password into the input fields. I've looked at this post , but I don't have the option to change this functionality, and the other solutions on don't work.

Basically, I have a disabled login button if the fields are empty on load. But when a browser fills in the input, it doesn't enable the button. I'm trying to find how to see if it changes.

I'm using jQuery and JS.

I've tried .change, on .ready, on .load, and all. It seems to happen after the .load event.

Does anyone know a solution to this? I would like to avoid using any sort of timeout.

Community
  • 1
  • 1
streetlight
  • 5,968
  • 13
  • 62
  • 101
  • Are you talking about the "Do you want ... to remember this password" that some browsers show? There is no way of knowing what the user has clicked there and then. However if the browser automatically places the values in the field, you can detect that it isn't empty. Of course this can go badly wrong due to browser compatibility and the ability for any user to turn off Javascript if they want to. – George Nov 02 '12 at 14:51
  • Doesn't the browser automatically submit the form after filling in the login-data? – Bergi Nov 02 '12 at 14:53
  • Does the change event fire when the browser populates the fields? Just change the disabled button to the enabled button on that event? – urbananimal Nov 02 '12 at 14:53
  • I am looking for the event that fires when the browser prepopulates the field based on whether the user has selected 'do you want to remember this password' in the past. @urbananimal, unfortunately onchange doesn't fire – streetlight Nov 02 '12 at 15:03

4 Answers4

2

I think there is no way to detect if the browser has some buil-in feature that pre-populates the fields.

You could solve the problem with the a timer that enable the button, if something is there. Something like this:

setInterval(function (){
 if($("#username").val()!=""){
  $("#loginbutton").attr("enabled","enabled"); 
 }
},1000)
Simon Edström
  • 6,461
  • 7
  • 32
  • 52
  • 1
    That's better than a onetime check. Some wallets will ask the user for a password first, so it could take some time. – Stefan Majewsky Nov 02 '12 at 15:00
  • This does work -- however, it's disappointing that a function like this is needed! I was hoping there was an event out there to listen to could solve this issue without resorting to timing functions like this. Thank you for the solution though! – streetlight Nov 02 '12 at 15:22
  • Depending on the scenario, the default value could be different from "". If that's the case, you could use `if( $('#id').val() != $('#id').prop('defaultValue') ){ /*do something*/ }` – Timothy Aaron Nov 02 '12 at 16:26
  • This doesn't work for Chrome, as the fields are only pseudo-filled in – sookie Feb 21 '19 at 11:36
0

The key thing is that the field will be populated without there having being any keypresses in the field.

So if you trap .keypress on the input field to know if a key is any pressed, then if you get to submitting the form and find there were no keypresses despite a value being there - then you can be somewhat sure that the browser pre-populated it.

If you want to know before submitting (soon after the page loads), you'd want to run a check on an interval that sees if the value has changed despite no key presses.

As @japrescott pointed out, you might want to check for .focus as well in case the user pastes a value in.

PhonicUK
  • 13,486
  • 4
  • 43
  • 62
  • 1
    I think he's after an 'event' which fires when the browser pre-populates. In-fact I get the impression he/she wan't to know if the browser is going to pre-populate so he/she can load a different button image... – urbananimal Nov 02 '12 at 14:51
  • Updated answer. Same idea still, difference in value despite no keypress event being fired. – PhonicUK Nov 02 '12 at 14:54
  • 1
    the input could happen via mouse->paste, so check for `focus` as well! – japrescott Nov 02 '12 at 14:54
0

Haven't test this, but couldn't you simply compare the default values of each field to the values of each field after the page is loaded (or .2 seconds after the page is loaded if that's an issue)?

Timothy Aaron
  • 3,059
  • 19
  • 22
-1

Give a shoot to Jquery .live() function

$('.element').live('load', function(){
  enableLogin();
});
swapab
  • 2,402
  • 1
  • 27
  • 44