stuller/Autofill Detect

## Autofill Detect
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Autofill Detection</title>
    <style>
        body {
            font-family: 'Arial', 'Helvetica', san-serif;
        }
        .fieldgroup {
            margin:8px;
            display:flex;
            flex-direction: column;
            width:200px;
        }
        .input {
            border:1px solid #666;
        }
        input:-webkit-autofill{
            -webkit-transition: "color 1s ease-out, background-color 9999s ease-out";
            /* delay is necessary - otherwise you will get events every time user rolls
                over a new option.  you may still get multiple events if user rolls over
                options slower than you have your delay set
            */
            -webkit-transition-delay: 1s;
        }
    </style>
</head>
<body>
<h1>Autofill Detection</h1>
<div>
    <form>
        <div class="fieldgroup">
            <label for="firstName">First Name:</label>
            <input class="input" type="text" id="firstName"/>
        </div>
        <div class="fieldgroup">
            <label for="lastName">Last Name:</label>
            <input class="input" type="text" id="lastName"/>
        </div>
        <div class="fieldgroup">
            <label for="addressLine1">Address:</label>
            <input class="input" type="text" id="addressLine1"/>
        </div>
        <div class="fieldgroup">
            <label for="addressLine2">Apt/Suite:</label>
            <input class="input" type="text" id="addressLine2"/>
        </div>
        <div class="fieldgroup">
            <label for="city">City:</label>
            <input class="input" type="text" id="city"/>
        </div>
        <div class="fieldgroup">
            <label for="state">State:</label>
            <input class="input" type="text" id="state"/>
        </div>
        <div class="fieldgroup">
            <label for="postalCode">Postal Code:</label>
            <input class="input" type="text" id="postalCode"/>
        </div>
    </form>
</div>

<script>
    var handleAutofill = function(e) {
        console.log(e.target.id, 'has been autofilled');
    };
    const fields = document.querySelectorAll('input');
    // add event listener to fields to listen for transitionend on webkit autofill css updates
    // works in chrome, should also work in safari
    fields.forEach(field => field.addEventListener('transitionend', handleAutofill, false));
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Autofill Detection</title>
	<style>
	body {
	font-family: 'Arial', 'Helvetica', san-serif;
	}
	.fieldgroup {
	margin:8px;
	display:flex;
	flex-direction: column;
	width:200px;
	}
	.input {
	border:1px solid #666;
	}
	input:-webkit-autofill{
	-webkit-transition: "color 1s ease-out, background-color 9999s ease-out";
	/* delay is necessary - otherwise you will get events every time user rolls
	over a new option. you may still get multiple events if user rolls over
	options slower than you have your delay set
	*/
	-webkit-transition-delay: 1s;
	}
	</style>
	</head>
	<body>
	<h1>Autofill Detection</h1>
	<div>
	<form>
	<div class="fieldgroup">
	<label for="firstName">First Name:</label>
	<input class="input" type="text" id="firstName"/>
	</div>
	<div class="fieldgroup">
	<label for="lastName">Last Name:</label>
	<input class="input" type="text" id="lastName"/>
	</div>
	<div class="fieldgroup">
	<label for="addressLine1">Address:</label>
	<input class="input" type="text" id="addressLine1"/>
	</div>
	<div class="fieldgroup">
	<label for="addressLine2">Apt/Suite:</label>
	<input class="input" type="text" id="addressLine2"/>
	</div>
	<div class="fieldgroup">
	<label for="city">City:</label>
	<input class="input" type="text" id="city"/>
	</div>
	<div class="fieldgroup">
	<label for="state">State:</label>
	<input class="input" type="text" id="state"/>
	</div>
	<div class="fieldgroup">
	<label for="postalCode">Postal Code:</label>
	<input class="input" type="text" id="postalCode"/>
	</div>
	</form>
	</div>

	<script>
	var handleAutofill = function(e) {
	console.log(e.target.id, 'has been autofilled');
	};
	const fields = document.querySelectorAll('input');
	// add event listener to fields to listen for transitionend on webkit autofill css updates
	// works in chrome, should also work in safari
	fields.forEach(field => field.addEventListener('transitionend', handleAutofill, false));
	</script>
	</body>
	</html>