电子邮件域数据列表助手

如果有人注册您的网络应用程序，他们将电子邮件地址输入为 [电子邮件保护]？他们没有注意到，他们从未收到确认邮件，他们无法再次登录，“忘记密码”功能不起作用，并且有很多沮丧和互相指责。

我们不能帮忙吗？

我有一个非常基本的想法，建议使用 <datalist> 建议下拉菜单提供常见的电子邮件域。本质上是这样的

这样的数据列表可以附加到任何文本输入，它们本质上提供了建议。用户仍然可以输入他们想要的任何有效值。我认为这就像 <select> 和 <input> 的混合体。

以下是它的工作原理。

标记

完全正常的 HTML，无论是否

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="[email protected]">

使用 JavaScript 插入数据列表

Datalist 是一个 HTML 元素，但我们不能立即将其放入标记中，因为我们还不知道要放入什么。我们放入其中的选项将需要包含电子邮件地址的第一部分。这是 JavaScript 的领域，因此我们不妨只在 JavaScript 运行时添加数据列表。

jQuery，因为我喜欢它。

// Create empty datalist and append to DOM
var datalist = $("<datalist />", {
  id: 'email-options'
}).insertAfter("#email");

// Correlate to input
$("#email").attr("list", "email-options");

电子邮件顶级域名

电子邮件有一些非常流行的“顶级域名”。让我们将它们放在一个数组中

var domains =  ["yahoo.com", "gmail.com", "google.com", "hotmail.com", "me.com", "aol.com", "mac.com", "live.com", "comcast.com", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk", "facebook.com", "verizon.net", "att.net", "gmz.com", "mail.com"];

根据需要调整。

监控按键

我们不想打扰用户，直到他们按下“@”键，我们知道他们正在继续输入电子邮件地址的域名部分。因此，首先，我们监控按键事件

$("#email").on("keyup", function() {

});

然后我们测试该值是否包含“@”

$("#email").on("keyup", function() {

  var value = $(this).val();
                    
  if (value.indexOf("@") != -1) {
    // it's there, update datalist
  }

});

我们最好有条理

随着事情变得更加复杂，我们应该更加担心意大利面条代码和通常难以维护的混乱。让我们 井井有条，使用一个对象将所有内容整合在一起。

结构基本上是

var EmailDomainSuggester = {
  
  domains: ["yahoo.com", "gmail.com", "google.com", "hotmail.com", "me.com", "aol.com", "mac.com", "live.com", "comcast.com", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk", "facebook.com", "verizon.net", "att.net", "gmz.com", "mail.com"],
  
  bindTo: $('#email'),
  
  init: function() {
    this.addElements();
    this.bindEvents();
  },
  
  addElements: function() {
    // Create empty datalist
    this.datalist = $("<datalist />", {
      id: 'email-options'
    }).insertAfter(this.bindTo);
    // Corelate to input
    this.bindTo.attr("list", "email-options");
  },
  
  bindEvents: function() {
    this.bindTo.on("keyup", this.testValue);
  },
    
  testValue: function(event) {
    var el = $(this),
        value = el.val();
                    
    // remove the != -1 if you want the datalist to show up immediately as you type the @
    // with it in place, it won't show up until you type the NEXT character
    if (value.indexOf("@") != -1) {
       value = value.split("@")[0];
       EmailDomainSuggester.addDatalist(value);
    }
     
  },
  
  addDatalist: function(value) {
    
  }
  
}

EmailDomainSuggester.init();

动态生成数据列表

请注意，在上面的代码中，我在 split 中添加了一点点内容，该内容是我们从 @ 符号处的输入中提取的值。这使我们能够提取电子邮件地址中域之前的部分。例如，“chriscoyier@gm” 的“chriscoyier”部分。然后我们将它传递给一个名为 addDatalist 的新函数。现在让我们使用它

// variables for iteration and string concatination
var i, newOptionsString = "";

// loop over all the domains in our array
for (i = 0; i < this.domains.length; i++) {
  newOptionsString += 
    "<option value='" + 
      value + 
      "@" +
      this.domains[i] +
    "'>";
}

// add all the <option>s to our datalist
this.datalist.html(newOptionsString);

如果我们还没准备好，就删除数据列表

作为最后的清理工作，如果输入中的值还没有“@”符号，我们应该删除数据列表。即使用户最初输入了它，然后又退回去了。我们可以在 testValue 函数中处理它。我们要么使用最新版本更新数据列表，要么完全删除它

if (value.indexOf("@") != -1) {
  value = value.split("@")[0];
  EmailDomainSuggester.addDatalist(value); 
} else {
  // empty list
  EmailDomainSuggester.datalist.empty();
}

最终演示

与其在这里粘贴一大块代码，不如在 Pen 中查看它

查看 Pen 使用 帮助完成电子邮件地址 by Chris Coyier (@chriscoyier) on CodePen

更健壮的解决方案

记录在案，我不确定数据列表方法是否是一个好主意。这需要一些真正的用户体验测试才能确定它是否真的有用。它可能会以用户混淆的形式造成伤害。我更确定某种形式的电子邮件域检查是一个好主意。

GitHub 上有一个名为 mailcheck.js 的开源项目，它看起来很棒。

jquery.email-autocomplete.js 是另一个选择。

是的

您使用过这样的东西吗？您对这些方法怎么看？您是否针对此或类似的想法进行了任何用户体验测试？您是否有其他想法来解决“错误电子邮件”问题？