UX trick for email input

index.html

<h1>UX trick for email inputs</h1>
<h2>Awesome for mobile sign ups</h2>

<label>Email</label>
<input type="email" class="email" required>
<ul class="autosuffix"></ul>












<a class="follow" href="https://twitter.com/mildrenben" target="_blank"><i class="fa fa-twitter"></i>Follow Me</a>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700' rel='stylesheet' type='text/css'>

script.js

var email = document.querySelector('.email'),
    auto = document.querySelector('.autosuffix');

var popularEmails = ['gmail.com', 'googlemail.com', 'hotmail.com', 'yahoo.com', 'msn.com', 'aol.com'];

email.addEventListener('keyup', function() {
  auto.innerHTML = '';
  if(email.value.match('@')) {
    var afterAt = email.value.substring(email.value.indexOf('@') + 1, email.value.length);
    var popularEmailsSub = [];
    for(var l = 0; l < popularEmails.length; l++) {
      popularEmailsSub.push(popularEmails[l].substring(0, afterAt.length))
    }
    if(afterAt == '') {
      for(var i = 0; i < popularEmails.length; i++) {
        auto.innerHTML += '<li>' + email.value + popularEmails[i] + '</li>';
      }
    }
    else if(!(afterAt == '')) {
      var matchedEmails = [];
      for(var k = 0; k < popularEmails.length; k++) {
        if(popularEmailsSub[k].match(afterAt)) {
          matchedEmails.push(popularEmails[k]);                    
        }
      }
      for(var i = 0; i < matchedEmails.length; i++) {
        auto.innerHTML += '<li>' + email.value.substring(0, email.value.indexOf('@')) + '@' + matchedEmails[i] + '</li>';
      }
    }
    var autoItems = document.querySelectorAll('.autosuffix li');
    for(var j = 0; j < autoItems.length; j++) {
      autoItems[j].addEventListener('click', function() {
        email.value = this.textContent;
        auto.innerHTML = '';
      });
    }
  }
});

style.css

$emerald: #2ecc71;
$asphalt: #34495e;
$grey: #9e9e9e;

$shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
$cubic: cubic-bezier(.64,.09,.08,1);

html, body {
  width: 100%;
  font-family: Roboto, sans-serif;
}

h1 {
  font-size: 26px;
  background: $emerald;
  color: white;
  padding: 40px 0 40px 20%;
  margin-bottom: 50px;
}

h2 {
  margin-left: 20%;
  font-size: 22px;
  color: $asphalt;
}

label {
  margin-left: 20%;
  margin-top: 100px;
  display: block;
  font-size: 14px;
}

.email {
  width: 260px;
  margin-left: 20%;
  display: block;
  font-size: 16px;
  padding: 10px 0;
  border: none;
  border-bottom: solid 1px darken($grey, 40%);
  color: darken($grey, 40%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 98%, darken($grey, 35%) 98%);
  background-repeat: no-repeat;
  background-size: 260px 100%;
  background-position: -260px 0;
  transition: background-position 0.2s $cubic;
  &:focus, &:valid {
    background-position: 0 0;
    outline: none;
  }
}

.autosuffix {
  margin-left: 20%;
  margin-top: 10px;
  box-shadow: $shadow;
  display: inline-block;
  border-radius: 3px;
  position: absolute;
  li {
    padding: 14px;
    padding-right: 20px;
    cursor: pointer;
    color: darken($grey, 40%);
    &:first-of-type {
      border-radius: 3px 3px 0 0;
    }
    &:last-of-type {
      border-radius: 0 0 3px 3px;
    }
    &:hover {
      background: lighten($grey, 30%);
    }
  }
}













//---------------------------------------------

.follow {
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 50px;
  background: #03A9F4;
  display: block;
  margin: 300px auto 0;
  white-space: nowrap;
  padding: 13px;
  box-sizing: border-box;
  color: white;
  transition: all 0.2s ease;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 5px 6px 0 rgba(0,0,0,0.2);
  i {
    margin-right: 20px;
    transition: margin-right 0.2s ease;
  }
  &:hover {
    width: 134px;
    i {
      margin-right: 10px;
    }
  }
}

@media screen and (max-width: 800px) {
  .follow {
    margin: 400px auto 0;
  }
}

UX trick for email input.markdown

UX trick for email input ('-' * 24)

A Pen by Ben Mildren on CodePen.

License.