如何使用域自动填充电子邮件地址

时间:2017-11-27 10:02:40

标签: javascript html css

我想为自动填充电子邮件

等电子邮件执行自动填充功能

enter image description here

我尝试使用自动完成的电子邮件地址,但失败了。

我的JS代码编写如下:

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();

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

  },

  addDatalist: function(value) {
    var i, newOptionsString = "";
    for (i = 0; i < this.domains.length; i++) {
      newOptionsString += 
        "<option value='" + 
          value + 
          "@" +
          this.domains[i] +
        "'>";
    }

    // add new ones
    this.datalist.html(newOptionsString);
  }

}

EmailDomainSuggester.init();

我的HTML代码段如下所示:

 <label for="email">Email</label>
 <input id="email" name="email" type="email" placeholder="your@email.com">

我写作时并没有显示建议。 但是当我逐个移除角色时它会起作用。

当我删除时,我会显示建议,但是当我删除时 字符一个接一个&#39; @&#39;

0 个答案:

没有答案