JSFiddle - React, Tailwind, and code Playground

by 20yco

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="[email protected]" 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>

JavaScript

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('change', myFunction );

//fallback in case change is not fired on autocomplete
var _k = null;
inputs[i].addEventListener( 'keyup', function(e){_k=e.type});
inputs[i].addEventListener( 'click', function(e){_k=e.type});
inputs[i].addEventListener( 'input', function(e){ if(_k === 'keyup') myFunction();})
}