Email Domain Datalist Hilfe

Was ist, wenn sich jemand für Ihre Web-App anmeldet und seine E-Mail-Adresse eingibt als [email protected]? Er bemerkt es nicht, erhält nie seine Bestätigungs-E-Mail, kann sich nie wieder anmelden, die Funktion „Passwort vergessen“ funktioniert nicht, und es gibt viel Frustration und gegenseitiges Beschuldigen.

Können wir da nicht helfen?

Ich hatte eine ganz einfache Idee, gängige E-Mail-Domains mit einem <datalist>-Vorschlags-Dropdown anzubieten. Im Grunde so

Solche Datalists können an jedes textbasierte Eingabefeld angehängt werden und bieten im Wesentlichen Vorschläge. Der Benutzer kann immer noch jeden beliebigen gültigen Wert eingeben. Es ist sozusagen eine Mischung aus <select> und <input>.

So funktioniert es.

Der Markup

Perfekt normales HTML, das funktioniert, egal ob

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

Einfügen des Datalist mit JavaScript

Datalist ist ein HTML-Element, aber wir können es nicht direkt in den Markup einfügen, da wir noch nicht wissen, was wir hineinschreiben sollen. Die Optionen, die wir dort einfügen, müssen den ersten Teil der E-Mail-Adresse enthalten. Das ist Territorium für JavaScript, also fügen wir den Datalist am besten nur hinzu, wenn JavaScript läuft.

jQuery, weil ich es mag.

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

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

Die E-Mail-TLDs

Es gibt eine Handvoll sehr beliebter „Top-Level-Domains“ für E-Mails. Packen wir sie in ein Array

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"];

Nach Bedarf anpassen.

Auf Tastatureingaben achten

Wir wollen den Benutzer nicht stören, bis er die „@“-Taste gedrückt hat und wir wissen, dass er zum Domain-Teil seiner E-Mail-Adresse übergeht. Also beobachten wir zuerst das Tastaturereignis

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

});

Dann prüfen wir, ob der Wert das @ enthält

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

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

});

Wir sollten uns besser organisieren

Je komplexer es wird, desto mehr sollten wir uns Sorgen über Spaghetti-Code und generell schwer wartbare Unübersichtlichkeit machen. Lassen Sie uns mit einem Objekt organisieren, um alles zusammenzuhalten.

Die Struktur wird im Grunde

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

Erstellung des Datalist im laufenden Betrieb

Beachten Sie, dass ich im obigen Code einen kleinen Teil eingefügt habe, in dem ich den aus dem Eingabefeld extrahierten Wert am @-Symbol splitte. Das ermöglicht es uns, den Teil der E-Mail-Adresse vor der Domain zu extrahieren. Zum Beispiel den Teil „chriscoyier“ von „chriscoyier@gm“. Dann übergeben wir das an eine neue Funktion namens addDatalist. Nun verwenden wir sie

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

Entfernen des Datalist, wenn wir nicht bereit dafür sind

Als letzten Aufräumschritt sollten wir den Datalist entfernen, wenn der Wert im Eingabefeld noch kein @-Symbol enthält. Selbst wenn der Benutzer ihn ursprünglich eingegeben und dann wieder gelöscht hat. Das können wir in unserer Funktion `testValue` behandeln. Entweder aktualisieren wir den Datalist mit dem Neuesten vom Neuen oder wir entfernen ihn komplett

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

Finale Demo

Anstatt hier einen riesigen Codeblock einzufügen, können Sie ihn im Pen ansehen

Siehe den Pen Hilfe beim Vervollständigen von E-Mail-Adressen mit von Chris Coyier (@chriscoyier) auf CodePen

Eine robustere Lösung

Fürs Protokoll: **Ich bin mir nicht absolut sicher, ob der Datalist-Ansatz eine gute Idee ist.** Es würde einige echte UX-Tests erfordern, um zu sehen, ob er tatsächlich hilfreich ist. Er könnte in Form von Benutzerverwirrung schädlich sein. Ich bin mir sicherer, dass eine Form der E-Mail-Domain-Überprüfung eine gute Idee ist.

Es gibt ein Open-Source-Projekt auf GitHub namens mailcheck.js, das ziemlich gut aussieht.

jquery.email-autocomplete.js ist eine weitere Option.

Yup

Haben Sie so etwas verwendet? Was denken Sie über die Ansätze? Haben Sie UX-Tests zu dieser oder ähnlichen Ideen durchgeführt? Haben Sie weitere Ideen, um das Problem der „falschen E-Mail“ anzugehen?