2

I am trying to attach a click handler on an input, but for some reason it doesn't work for first click on inputs that get autosuggestion in safari. All other clicks after the first one work. So for example if an input has a name or label before it saying First name, Last name, Email or anything similar Safari will put a suggestion widget at the end of the input and suggest my information that is in Keychain Access I guess. Click event will not trigger the first time I click on that input, after the first one it triggers ok.

Here is the code that produces this issue. Basically I need a way to trigger a click event on inputs every time it gets clicked (preferably vanilla js, but jquery would be ok too).

HTML:

<form>
    // Click on this input doesn't trigger the first time I click it because Safari has a suggestion widget for this input
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="you@example.com" data-input="">

    // Click on this input triggers every time I click it with no issue
    <label for="address">Address</label>
    <input type="text" class="form-control" id="address" placeholder="1234 Main St" required="" data-input="">
</form>

JS:

var inputs = document.querySelectorAll('[data-input]');

var myFunction = function(event) {
    console.log('Clicked');
};

for (var i = 0; i < inputs.length; i++) {
    // I put this console.log here to see if all of the inputs pass through this for loop to get the event listener and they do
    console.log(inputs[i]);
    inputs[i].addEventListener('click', myFunction);
}

EDIT: even though @gopigorantala's link in his comment might be considered duplicate, I am not looking for the same thing that question is looking for. That question asks for a way to disable safari autosuggestion feature on inputs, I am looking for a way to detect clicks on inputs despite autosuggestion being there.

Mario Plantosar
  • 804
  • 9
  • 24
  • duplicate with https://stackoverflow.com/questions/22661977/disabling-safari-autofill-on-usernames-and-passwords – ggorantala Jan 12 '19 at 09:41
  • http://jsfiddle.net/20yco/s15y6gzp/1/ first click trigger works for me in safari – 20yco Jan 12 '19 at 09:43
  • @gopigorantala I searched but didn’t come across this answer, thanks for linking! I need a js solution though if possible, without fake input fields as this is intended for js plugin so I wouldn’t like to do anything in the html. 20yco it works in jsfiddle and codepen for some reason because safari doesn’t try to autofill these inputs. – Mario Plantosar Jan 12 '19 at 09:51
  • @MarioPlantosar tried this in local index.html in Safari browser, all works fine, hm – 20yco Jan 12 '19 at 10:06
  • @20yco hmmm, maybe safari/keychain access doesn’t have your info to fill inputs so there is no suggestion – Mario Plantosar Jan 12 '19 at 10:20
  • @MarioPlantosar can you try this one in safari? http://jsfiddle.net/20yco/56zwb1kv/6/, works not perfect, but i'm think true is near – 20yco Jan 12 '19 at 10:24

0 Answers0