I am attempting to trigger a function that can detect if the browser has autofilled a field and then add a specific class to it.
After finding a thread with a solution that mostly works, mentioned here:
Here is how I implemented it:
$.fn.allchange = function (callback) {
var me = this;
var last = "";
var infunc = function () {
var text = $(me).val();
if (text != last) {
last = text;
callback();
}
setTimeout(infunc, 10);
}
setTimeout(infunc, 10);
};
$(".input").allchange(function () {
$('.input').addClass('not--empty');
});
The issue I am facing is that I have another function in place that checks for input changes on blur and adds a class accordingly. However, the above function is causing the class to be added to all instances of '.input'.
I believe the solution lies in triggering the function only on the autofilled element. But when I try using the following code snippet, it does not yield the desired outcome:
$(".input").allchange(function () {
$(this).addClass('not--empty');
});
Any suggestions on how to make this work correctly?
EDIT: To provide more context, I've included an image below showcasing the scenario: