Erstellen eines mobilfreundlichen Formulars mit E-Mail-Domain-Vorschlägen

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie ein responsives Webformular erstellen, das über die Einstellung von <input type="email"> hinausgeht, um Benutzern bei der Eingabe von E-Mail-Adressinformationen zu helfen. Dieses Formular hilft Benutzern (hauptsächlich Mobilgeräten), indem es automatisch beliebte E-Mail-Domains vorschlägt.

Einführung

Design für Mobilgeräte wird im Webdesign immer wichtiger. Mit einer ständig steigenden Anzahl von Benutzern, die von mobilen Geräten auf Inhalte zugreifen, werden Designmethoden wie Responsive Webdesign zu Standardpraktiken, um die Benutzerfreundlichkeit zu verbessern.

Das Ziel dieses Tutorials ist es, genau dies zu tun – responsive Webdesign-Techniken zu integrieren, um ein Usability-Problem aus mobiler Sicht zu verbessern.

Lassen Sie uns also gleich eintauchen, indem wir zuerst die Bedenken hinsichtlich der Benutzerfreundlichkeit verstehen, die wir ansprechen.

Das Problem

Seien wir ehrlich, das Ausfüllen von Formularen auf einem mobilen Gerät kann frustrierend sein. Als allgemeine Faustregel können Sie wahrscheinlich sagen, dass die Wahrscheinlichkeit, dass der Benutzer das Formular tatsächlich ausfüllt, mit zunehmender Anzahl von Feldern in Ihrem Formular abnimmt. Wieso den? Denn die Eingabe vieler Informationen über ein mobiles Gerät ist aufgrund von Faktoren wie kleineren und/oder virtuellen Tastaturen einfach schwieriger als mit einem herkömmlichen Desktop oder Laptop.

Lösen mit Software

Hersteller von Mobilgeräten erkennen dieses Problem bei der Geräteeingabe und haben Softwarelösungen entwickelt, um Benutzer besser zu unterstützen. Denken Sie zum Beispiel an Apples iPhone. Da die Tastatur des iPhones virtuell ist, können sich die angezeigten Zeichen je nach Kontext jederzeit ändern. So können Entwickler das type-Attribut eines <input>-Elements kennzeichnen und die Tastatur zeigt Zeichen an, die für den angeforderten Datentyp des Formularfelds relevant sind.

Wie Sie sehen, erhalten Sie die Standardtastatur, wenn Sie nur normalen Text eingeben. Wenn Sie eine E-Mail-Adresse eingeben, werden das "@"-Symbol und das "." (Periode) hervortreten. Oder, wenn Sie eine Zahl eingeben müssen, ändert sich die Tastatur, um Ihnen zuerst Zahlen zu geben!

Die Anatomie einer E-Mail-Adresse verstehen

Betrachten Sie die Anatomie einer E-Mail-Adresse – was hat jede E-Mail-Adresse gemeinsam? Jede E-Mail besteht aus drei wichtigen Teilen:

Ein Benutzername
Das "at"-Symbol (@)
Eine Domäne

Jede Domain hat einen Punkt (.)

Wenn Benutzer also auf ein Formularfeld stoßen, das nach einer E-Mail fragt, wissen wir, dass sie das @-Symbol und einen Punkt verwenden müssen, da diese für jede E-Mail-Adresse gelten. Deshalb hilft die Einstellung <input type="email"> den Benutzern! Es ermöglicht ihnen einfachen Zugriff auf die wesentlichen Komponenten jeder E-Mail-Adresse.

Warum dort aufhören?

Es ist möglich, dass wir Benutzern bei der Eingabe ihrer E-Mail-Adresse etwas mehr Unterstützung bieten. Ein großer Prozentsatz der Benutzer verwendet E-Mail-Domains, die sehr verbreitet sind. Eine schnelle Google-Suche zeigt einige der beliebtesten E-Mail-Domains:

@aol.com
@hotmail.com
@gmail.com
@yahoo.com
und so weiter

Wenn ein großer Teil Ihrer Benutzerbasis dieselbe E-Mail-Domäne verwendet, warum sollten sie sie dann ausfüllen? Was wäre, wenn wir dem Benutzer beim Ausfüllen des E-Mail-Teils des Formulars eine Art "automatischen Vorschlag" zur Verfügung stellen würden? Auf diese Weise erhielten sie, wenn sie anfingen, das "y" in "yahoo.com" einzugeben, einen Vorschlag, der besagte: "Hey, versuchst du, "yahoo.com" einzugeben? Wenn ja, tippe einfach hier und wir werden ausfüllen den Rest für dich!" Dies ist alles aus der Designperspektive möglich und das werden wir in diesem Tutorial tun.

Schritt 1: Erste Schritte mit HTML

Beginnen wir damit, etwas grundlegendes HTML zu erhalten.

 
<!DOCTYPE html> 
<html> 
<head> 
	<title>Email Domain Autocomplete</title> 
</head> 
 
<body> 
	 
</body> 
</html>

Schritt 2: Hinzufügen der Abhängigkeiten

Nun fügen wir die Links zu den Abhängigkeiten des Markups hinzu. Zuerst fügen wir einen Link zu Googles gehosteter Version von jQuery sowie einen Link zu "script.js" ein, der unseren später erstellten Javascript-Code enthält. Setzen wir diese direkt vor das schließende </body>-Tag.

1
2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
3	<script src="script.js" type="text/javascript"></script>

Fügen wir auch einen Link zu unserer CSS-Datei hinzu (die wir noch nicht erstellt haben). Sie können es in das <head>-Element einfügen.

1
2	<link href="styles.css" rel="stylesheet" />

Schritt 3: Flexibel gestalten

Da diese Seite bis hin zu Mobilgeräten reaktionsschnell und flexibel sein wird, müssen wir den Darstellungsbereich so einstellen, dass Mobilgeräte unsere Seite richtig darstellen. Wenn Sie eine eingehendere Analyse dessen wünschen, was dieser Code genau macht, lesen Sie den Artikel von Ian Yates zum Meta-Tag des Viewports. Andernfalls fügen Sie einfach dieses Code-Snippet in Ihr <head>-Element ein.

1
2	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Schritt 4: Erstellen des Containers

Beginnen wir mit dem Hinzufügen eines Hauptcontainers und einer Beschreibung des Zwecks unserer Seite:

 
<div id="container"> 
	<h1>Email Domain Auto-Suggest</h1> 
	<p>This form automatically suggests the popular email domain addresses. Although compatible on desktop computers, this feature is designed primarily for mobile devices. It will assist users who use popular email services such as gmail and hotmail.</p> 
</div>

Unser grundlegendes Markup sieht so aus:

Schritt 5: Erstellen des Formulars

Nun fügen wir das Markup für unser Formular ein. Wir werden eine ungeordnete Liste verwenden, um unserem Formular Struktur und semantische Bedeutung zu verleihen.

 
<h2>Examples:</h2> 
<form> 
	<ul> 
		<li> 
			<label>Try @aol.com:</label> 
			<input type="email" id="aol" /> 
		</li> 
		<li> 
			<label>Try @gmail:</label> 
			<input type="email" id="gmail" /> 
		</li> 
		<li> 
			<label>Try @msn or @me:</label> 
			<input type="email" id="msn_me" /> 
		</li> 
		<li> 
			<button type="submit">Submit</button> 
		</li> 
	</ul> 
</form>

Hinweis: Machen Sie sich keine Sorgen, dass wir unseren Elementen <label> und <input> nicht alle normalen Attribute gegeben haben. Da dieses Tutorial nicht die Handhabung und Übermittlung von Formularen behandelt, werden wir uns darüber nicht allzu viele Gedanken machen.

Noch ein Hinweis: Unser Markup für den eigentlichen Domain-Vorschlag wird mit Javascript eingefügt, deshalb haben wir es hier nicht.

Schritt 6: Seitenstruktur mit CSS

Beginnen wir damit, unserer Seite einige Stile mit CSS zu geben. Zuerst formatieren wir das <body>-Element:

 
body { 
	background:#f6f6f6; 
	font: 16px/1.5em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300; 
	margin:0; 
	padding:0; 
	color:#333; 
}

Hier legen wir die Hintergrundfarbe und einige Voreinstellungen für unsere Typografie wie Schriftgröße, Farbe und Zeilenhöhe fest. Wir haben auch einen guten Font-Stack von Helvetica für unseren Fließtext gesetzt.

Schritt 7: Reaktionsfähig (flüssig)

Wir möchten, dass unsere Seite bis hin zum Handy flexibel ist. Die beiden Schlüsselkomponenten, die wir verwenden, um dies zu erreichen, sind: Prozentsätze und die max-width-Regel.

Der alte Weg (feste Breite)

Wenn Sie sich unseren HTML-Code ansehen, sehen Sie, dass <div id="container"> der Hauptcontainer für den Inhalt unserer Seite ist. Schauen wir uns also an, wie wir dies traditionell tun würden:

 
#container { 
	margin:20px auto;  
	background:#fff; 
	width:500px; 
	padding:0 20px; 
	border:1px solid #c0c0c1; 
	border-bottom-color:#a8aaac; 
	border-top-color:#ccc; 
	box-shadow:0 1px 0 #dfe0e1; 
	border-radius:3px; 
}

Wir haben CSS verwendet, um einige grundlegende Stylings hinzuzufügen. Wir haben auch eine feste Breite von 500px mit etwas Auffüllung für unseren Inhalt und den margin: 0 auto verwendet zentriert unser div in der Mitte der Seite. Das Problem beim Festlegen der Breite des div auf einen festen Wert (in Pixeln) besteht darin, dass ein Teil unseres Inhalts abgeschnitten wird, wenn wir unsere feste Breite (500px) unterschreiten:

Der bessere Weg (Flüssigkeitsbreite)

Um unseren Container flexibel zu machen, nehmen wir unsere festen Breiten heraus und verwenden stattdessen Prozentsätze. Hier sind die Werte, die wir hinzufügen/ändern werden:

 
#container { 
	width:80%; 
	padding:0 5%; 
	max-width:500px; 
}

Hier legen wir die Breite unseres Containers auf 80% des Darstellungsbereichs des Browsers mit 5% auf jeder Seite fest. Sie sagen vielleicht "aber das macht nur 90% aus!" und du hast recht! Die anderen 10% werden tatsächlich als Marge verwendet (5 % auf jeder Seite). Wir müssen es nicht speziell einstellen, da es durch die margin: 0 auto bestimmt wird.

Außerdem haben wir max-width:500px hinzugefügt, weil wir nicht möchten, dass unser Formular jemals größer wird. Wenn also jemand ein 2100px-Browserfenster hat, wird unser Container-Div nicht 80% davon ausmachen. Stattdessen wird es bei 500px einfach aufhören zu expandieren! Cool nein?

Jetzt können Sie sehen, wie unsere Inhalte entsprechend der Bildschirmgröße richtig skaliert werden.

Schritt 8: Typografisches Styling (CSS)

Sie haben wahrscheinlich bemerkt, dass der Typ <h1> über sich selbst läuft, wenn die Browsergröße klein wird und der Text in die nächste Zeile geht. Wir werden das beheben, indem wir unseren Kopfzeilen ein paar typografische Stile hinzufügen:

 
h1, h2 { 
	padding:10px 0px; 
	border-bottom:1px solid #eee;  
	padding-left:0; 
	font-weight:300; 
	line-height:1.1em; 
} 
h1 {color:#018ff3;}

Jetzt werden Sie sehen, dass es zusammenkommt.

Schritt 9: Formatieren des Formulars (CSS)

Lassen Sie uns den Standard-Listenstil, der unsere Formularelemente umgibt, entfernen und ihnen etwas Abstand geben:

 
ul { 
	list-style-type:none;  
	margin:0;  
	padding:0;  
	position:relative; 
} 
li { 
	margin:1.5em 0;  
	position:relative; 
}

Hinweis Beim li-Element haben wir die relative Positionierung verwendet, da unser Vorschlagsfeld später absolut darin positioniert wird.

Jetzt fügen wir unserem Formular und seinen Feldern einige Stile hinzu:

 
form { 
	width:100%; 
	margin: 20px 0; 
} 
input { 
	display:block;  
	width:100%;  
	padding:0.3em 0.1em; 
	text-indent:5px; 
	border: 1px solid #e1e3e3; 
	border-bottom-color:#e5e5e6; 
	box-shadow: 0 -1px 0 #a7aaad; 
	border-radius:3px; 
	font-size:16px; 
	font-family:inherit; 
	box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;	 
}

Sie werden feststellen, dass wir die Felder <input /> auf 100% Breite setzen. Mit unserem zusätzlichen Padding werden die Eingaben tatsächlich über ihren übergeordneten Container hinausgehen! Um dies zu lösen, verwenden wir die box-sizing:border-box-Regel. Dies weist den Browser an, die Breite des Elements zu 100% zu berechnen, unabhängig von eventuellen Auffüllungen oder Rändern. Dadurch passt es immer in seinen übergeordneten Container. Weitere Informationen zu dieser Eigenschaft finden Sie im Artikel von Ian Yates Encourage Responsive Form Elements to Play Nice

Jetzt haben wir eine ziemlich anständig aussehende Form in Bezug auf Struktur und Abstand!

Schritt 10: Schaltflächen-Styling senden (CSS)

Lassen Sie uns nun etwas Styling auf unseren Senden-Button anwenden. Wir werden es visuell deutlich hervorheben, da es viele Schaltflächen zum Senden oder Aufrufen von Aktionen gibt:

 
button { 
	width:80%; 
	max-width:300px;  
	display:block; 
	margin:20px auto; 
	border:1px solid #0c6eb3; 
	box-shadow:0 1px 0 #ced0d1, 0 1px 0px #8cd1fd inset; 
	padding:10px; 
	color:#fff; 
	font-weight:bold; 
	border-radius:3px; 
	background: #159efd; /* Old browsers */ 
	background: -moz-linear-gradient(top, #159efd 0%, #018ff3 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#159efd), color-stop(100%,#018ff3)); /* Chrome,Safari4+ */ 
	background: -webkit-linear-gradient(top, #159efd 0%,#018ff3 100%); /* Chrome10+,Safari5.1+ */ 
	background: -o-linear-gradient(top, #159efd 0%,#018ff3 100%); /* Opera 11.10+ */ 
	background: -ms-linear-gradient(top, #159efd 0%,#018ff3 100%); /* IE10+ */ 
	background: linear-gradient(top, #159efd 0%,#018ff3 100%); /* W3C */ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159efd', endColorstr='#018ff3',GradientType=0 ); /* IE6-9 */ 
}

Hier ist eine Beschreibung dessen, was wir hier gemacht haben:

Knopfgröße

Wir stellen die Breite auf 80% ein, was bei kleineren Größen gut funktioniert. Aber wenn es sich um einen Desktop-Browser handelt, möchten wir nicht, dass sich die Schaltfläche über das gesamte Formular erstreckt. Also haben wir unsere praktische max-width-Regel verwendet, um dem Browser mitzuteilen, dass die Schaltfläche nicht breiter als 300px dargestellt werden soll.

Center

Wir haben die Anzeige auf Block gesetzt und ihr automatische Ränder gegeben. Dadurch wird die Schaltfläche im übergeordneten Div zentriert.

Visuelles Styling

Wir haben einige visuelle Stile mit Rahmen, Box-Schatten usw. hinzugefügt. Wir haben auch die CSS3-Hintergrundverlaufsfunktion verwendet. Sie können ausgezeichnete Generatoren für diese Art von Code online finden.

Schritt 11: Erstellen des Vorschlags-Markups

An dieser Stelle haben wir ein ziemlich gut aussehendes Formular, das bis hin zum Handy funktioniert, ohne Medienabfragen zu verwenden! Jetzt erstellen wir das Markup für den E-Mail-Domain-Vorschlag und gestalten ihn.

Denken Sie daran, dass dieses Markup etwas ist, das wir mit unserem Javascript einfügen. Sobald wir es also in unser Dokument eingefügt und es so gestaltet haben, wie es uns gefällt, nehmen wir es tatsächlich wieder heraus. Dies ist nur für Entwicklungszwecke einfacher.

Lassen Sie uns also ein <span>-Element direkt nach unserem <input />-Element einfügen:

1
2	<span class="suggestion">test@gmail.com</span>

Schritt 12: Styling des Vorschlagsfelds (CSS)

Wie Sie sehen, sieht unser Vorschlag im Moment nur wie Text aus. Fügen wir also einige CSS-Stile hinzu, damit es eher wie ein Vorschlagsfeld aussieht:

 
.suggestion { 
	line-height: 1.2em; 
	font-weight:bold; 
	font-size:12px; 
	position:absolute; 
	top:-18px; 
	left:100px; 
	color:#fff;  
	border-radius:5px;  
	box-shadow:0 1px 0px #75797a inset, 0 1px 2px #555;  
	border:1px solid #000; 
	padding:8px 10px; /* must be same as li */ 
	background: #3a3e3f; /* Old browsers */ 
	background: -moz-linear-gradient(top, #3a3e3f 0%, #323637 50%, #292a2c 51%, #212224 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3e3f), color-stop(50%,#323637), color-stop(51%,#292a2c), color-stop(100%,#212224)); /* Chrome,Safari4+ */ 
	background: -webkit-linear-gradient(top, #3a3e3f 0%,#323637 50%,#292a2c 51%,#212224 100%); /* Chrome10+,Safari5.1+ */ 
	background: -o-linear-gradient(top, #3a3e3f 0%,#323637 50%,#292a2c 51%,#212224 100%); /* Opera 11.10+ */ 
	background: -ms-linear-gradient(top, #3a3e3f 0%,#323637 50%,#292a2c 51%,#212224 100%); /* IE10+ */ 
	background: linear-gradient(top, #3a3e3f 0%,#323637 50%,#292a2c 51%,#212224 100%); /* W3C */ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3e3f', endColorstr='#212224',GradientType=0 ); /* IE6-9 */ 
}

Hier ist eine Beschreibung dessen, was wir hier gemacht haben:

Zeilenhöhe

Wenn Sie unserem Vorschlagsfeld eine line-height-Regel anstelle einer height-Regel geben, wird der Text vertikal im Feld zentriert.

Positionierung

Wie Sie sehen, haben wir für unser Vorschlagsfeld die absolute Positionierung verwendet. Wir versetzen es ein wenig nach links und nach oben, damit es das Eingabefeld nicht überdeckt.

Visuelles Styling

Wir haben einige visuelle Stile mit Rahmen, Box-Schatten usw. hinzugefügt. Wir haben auch die CSS3-Hintergrundverlaufsfunktion verwendet (wie zuvor beim button-Element).

Schritt 13: Popover-Stile für Vorschlagsfelder (CSS)

Jetzt haben wir das Vorschlagsfeld komplett formatiert, aber wir möchten es wie einen Vorschlag über dem Eingabefeld erscheinen lassen. Wir verwenden ein kleines Dreieck, um dies zu erreichen. Damit das Feld anklickbar erscheint, stellen wir auch sicher, dass der Hover-Status das Feld als anklickbar anzeigt:

 
.suggestion:hover {cursor:pointer;} 
.suggestion::after { 
	content: "\25BC"; 
	font-size:12px; 
	position:absolute; 
	bottom:-10px; 
	left:50%; 
	color:#000; 
}

Das Dreieck könnte mit Bildern hinzugefügt werden, aber wir haben es mit reinem CSS gemacht. Da wir einen Pseudo-Selektor verwenden, müssen wir den entsprechenden Escape-Unicode des Dreiecks verwenden, da wir die content:""-Regel verwenden. Dann verwenden wir einfach die Positionierung, um es dorthin zu bringen, wo wir es haben wollen.

Jetzt haben wir so etwas:

Schritt 14: Hinzufügen des Vorschlagsfeld-Hover/Active States (CSS)

Nun wollen wir unser Vorschlagsfeld um ein wenig Interaktivität erweitern. Wir erstellen einen schwebenden und aktiven Zustand, indem wir einfach den Hintergrund einfärben. Dadurch wird sichergestellt, dass wir dem Benutzer mitteilen, dass er mit dem Feld interagiert hat und mit ihm interagiert hat.

 
.suggestion:active, .suggestion:hover { 
	background: #34abe8; /* Old browsers */ 
	background: -moz-linear-gradient(top, #34abe8 0%, #007fd1 100%); /* FF3.6+ */ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34abe8), color-stop(100%,#007fd1)); /* Chrome,Safari4+ */ 
	background: -webkit-linear-gradient(top, #34abe8 0%,#007fd1 100%); /* Chrome10+,Safari5.1+ */ 
	background: -o-linear-gradient(top, #34abe8 0%,#007fd1 100%); /* Opera 11.10+ */ 
	background: -ms-linear-gradient(top, #34abe8 0%,#007fd1 100%); /* IE10+ */ 
	background: linear-gradient(top, #34abe8 0%,#007fd1 100%); /* W3C */ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34abe8', endColorstr='#007fd1',GradientType=0 ); /* IE6-9 */ 
	box-shadow:0 1px 0px #83c7f0 inset, 0 1px 2px #555; 
	border:1px solid #0075c0; 
	border-left-color:#0168a9; 
	border-right-color:#0168a9; 
	border-bottom-color:#014773;  
}

Wir müssen sicherstellen, dass wir auch die Farbe des kleinen Dreiecks ändern!

1
2	.suggestion:active::after, .suggestion:hover::after {
3	color:#0075c0;
4	}

Jetzt haben wir etwas, das so aussieht:

Herzlichen Glückwunsch! Jetzt sind wir alle mit dem HTML/CSS-Markup fertig. Jetzt müssen wir nur noch die Javascript-Interaktivität hinzufügen!

Hinweis: Vergessen Sie nicht, das <span>-Element jetzt zu entfernen. Wir werden es später mit jQuery einfügen.

Schritt 15: Den interaktiven Aspekt verstehen

Bevor wir uns mit dem Schreiben unseres Domain-Vorschlagsskripts befassen, sollten wir sicherstellen, dass wir skizzieren und verstehen, was wir erreichen möchten.

Erstellen des E-Mail-Domain-Stacks

Unser Skript soll erkennen, ob der Benutzer versucht, eine E-Mail-Domäne einzugeben, die mit einigen der beliebtesten E-Mail-Dienste im Web übereinstimmt. Eine kurze Google-Suche zeigt, dass die folgenden einige der am häufigsten verwendeten E-Mail-Service-Domains im Web sind:

@aol.com
@comcast.net
@gmail.com
@hotmail.com
@me.com
@msn.com
@yahoo.com

Natürlich können Sie dieser Liste beliebig viele E-Mail-Domains hinzufügen/abziehen, aber dies ist ein guter Anfang für das, was wir erreichen möchten.

Eine Domain vorschlagen

Was also, wenn der Benutzer versucht, eine dieser Domänenadressen einzugeben? Dann werden wir unser Skript verwenden, um es vorzuschlagen! Auf diese Weise kann der Benutzer einfach auf den Vorschlag klicken/tippen und die gewünschte E-Mail-Domäne an die bereits eingegebene anhängen. Wenn es nicht das ist, was sie wollen, können sie den Vorschlag einfach ignorieren.

Schritt 16: jQuery einrichten

Lassen Sie uns unsere Datei "script.js" erstellen und mit dem folgenden Code beginnen, um jQuery zu implementieren:

1
2	$(document).ready(function() {
3	//script code will go here
4	});

Schritt 17: Hinzufügen der Vorschlagsbox zum DOM

Wenn Sie sich erinnern, haben wir nach jedem Eingabeelement ein <span>-Element mit einer Klasse von "Vorschlag" eingefügt und es so gestaltet, wie wir unsere Vorschlagsboxen sehen wollten. Sobald wir es richtig gestaltet haben, haben wir das Markup aus unserem HTML entfernt

Nun, jetzt werden wir dieses Markup mit jQuery einfügen. Wir verwenden die Methode insertAfter():

1
2	$('<span class="suggestion"></span>').insertAfter('input[type=email]').hide();

Diese Codezeile findet jedes Eingabeelement auf der Seite, das das Attribut "type=email" hat (das für jedes unserer Eingabeelemente verwendet wird). Es fügt dann das von uns angegebene Markup (<span class="suggestion"></span>) nach jedem Element ein (daher der Name). Dann blenden wir alle Vorkommen der Vorschlagsbox aus (da wir noch nichts vorzuschlagen haben!)

Das Hinzufügen mit Javascript funktioniert gut, da Markup nur vorhanden sein muss, wenn der Benutzer Javascript auf seinem Computer aktiviert hat.

Schritt 18: Erfassen des Eingabewerts des Benutzers

Um zu bestimmen, welche E-Mail-Domain vorgeschlagen werden soll, müssen wir wissen, welchen Wert der Benutzer eingibt. Wir müssen also das im Fokus befindliche Eingabefeld beobachten und jedes Mal, wenn der Benutzer eine Taste auf der Tastatur drückt, fangen wir den neuen Eingabewert ab und speichern ihn in einer Variablen.

Wir können herausfinden, was der Benutzer eingibt, indem wir das keyup()-Ereignis verwenden. Durch das Anhängen von keyup an jedes Eingabeelement können wir unser Skript auslösen, um den Wert im Eingabefeld jedes Mal abzurufen, wenn ein neues Zeichen eingegeben wird.

1
2	$("input[type=email]").keyup(function () {
3	var value = $(this).val();
4	});

Jedes Mal, wenn der Benutzer dem Eingabefeld ein weiteres Zeichen hinzufügt, greift jQuery nun den Wert und speichert ihn in der Variablen "value".

Schritt 19: Nach dem @-Symbol suchen

Nun werden die Eingaben des Benutzers in der Variablen "value" gespeichert. Es ist uns jedoch egal, wie ihr E-Mail-Benutzername lautet. Wenn unsere Wertvariable gleich "joe" ist, hilft uns das nicht, da wir nicht wissen, welche Domain der Benutzer eingeben möchte. Wenn unsere Wertvariable jedoch gleich "joe@a" ist, können wir vermuten, dass der Benutzer möglicherweise versucht, "joe@aol.com" einzugeben, und wir können "@aol.com" vorschlagen.

Was wir also tun möchten, ist die Wertvariable bei jedem keyup()-Ereignis zu überprüfen und zu sehen, ob sie ein "@"-Symbol enthält. Wenn es ein "@"-Symbol enthält, wissen wir, dass der Benutzer bereit ist, seine E-Mail-Domain-Adresse einzugeben.

Daher werden wir die Position des "@"-Symbols in einer Variablen speichern, um sie später zu verwenden. Wir werden dies mit der Methode indexOf() tun. Wir erstellen einfach eine neue Variable (a_pos) und setzen sie gleich dem Indexwert des "@" in der value-Variablen.

1
2	var a_pos = value.indexOf('@'); // value will default to -1 if not entered

Beachten Sie, dass unsere Variable a_pos standardmäßig den Wert -1 hat, wenn das "@"-Symbol noch nicht eingegeben wurde. Andernfalls erhalten wir die Position des Zeichens in der Zeichenfolge.

Schritt 20: Speichern des übergeordneten Elements für den Kontext

Wir möchten auch das übergeordnete Element jedes Eingabeelements speichern, das vom Benutzer im Fokus steht. Dies ist nützlich, wenn wir unser Vorschlags-Markup anzeigen, da wir nicht alle Vorschlagsfelder auf der Seite anzeigen möchten. Vielmehr zeigen wir nur diejenige, die im Fokus steht (dazu später mehr).

1
2	var parent = $(this).parent();

Schritt 21: Vorschlagen einer E-Mail-Domain

Jetzt haben wir alles an Ort und Stelle, um zu sehen, ob der Benutzer tatsächlich eine E-Mail-Adresse eingibt! Also richten wir jetzt eine if/else-Anweisung ein.

Wenn die Variable "a_pos" den Wert -1 hat, wissen wir, dass der Benutzer das "@"-Symbol noch nicht eingegeben hat. Wenn es einen anderen Wert hat, wissen wir, dass das Symbol "@" eingegeben wurde. Also lassen Sie uns das folgende if/else einrichten:

 
if (a_pos != -1) {  
	// @ has been entered 
} else { 
	// @ has not been entered yet 
}

Vorhersage einer Domain

Wenn das '@'-Symbol tatsächlich eingegeben wurde, möchten wir überprüfen und sehen, was das Zeichen NACH dem @-Symbol ist. Wenn es ein "g" ist, könnten wir dem Benutzer "gmail.com" vorschlagen. Wenn es ein "y" ist, könnten wir "yahoo.com" und so weiter vorschlagen.

Also werden wir dies in unserer "if"-Anweisung von oben festhalten:

1
2	if ( value[a_pos+1] == 'a' ){
3	$('.suggestion', parent).text('aol.com').show();
4	}

Dieser Code sagt: "Wenn der erste Zeichenwert NACH der Position des '@'-Symbols gleich 'a' ist, dann schlagen Sie dem Benutzer 'aol.com' vor."

Hinweis: Sie werden feststellen, dass wir die Klasse .suggestion auswählen. Da wir mehrere 'Vorschlags'-Klassen haben, wird dadurch jede 'Vorschlags'-Klasse auf der Seite ausgewählt, die wir nicht wollen. Aus diesem Grund setzen wir die Variable 'parent' und verwenden sie als Kontext unseres Selektors: $('.suggestion', parent). jQuery wählt jetzt nur Elemente mit einer Klasse von 'Vorschlag' im Kontext des übergeordneten Elements des fokussierten Eingabefelds aus!

Schritt 22: Alle Vorschläge für E-Mail-Domains vervollständigen

Da wir nun den Code haben, um E-Mail-Domains vorzuschlagen, müssen wir nur noch auf andere Werte testen, z. B. 'g' für 'gmail.com' und 'y' für 'yahoo.com'. Da wir eine if-Anweisung verwenden, fügen wir alle anderen Vorschläge für Domänenadressen mit einer else if-Anweisung an.

Fügen wir also eine für 'comcast.net' hinzu:

1
2	else if ( value[a_pos+1] == 'c' ){
3	$('.suggestion', parent).text('comcast.net').show();
4	}

Jetzt eine für 'gmail.com':

1
2	else if ( value[a_pos+1] == 'g' ){
3	$('.suggestion', parent).text('gmail.com').show();
4	}

Jetzt eine für 'hotmail.com':

1
2	else if ( value[a_pos+1] == 'h' ){
3	$('.suggestion', parent).text('hotmail.com').show();
4	}

Jetzt eine für 'live.com':

1
2	else if ( value[a_pos+1] == 'l' ){
3	$('.suggestion', parent).text('live.com').show();
4	}

Jetzt eine für 'yahoo.com':

1
2	else if ( value[a_pos+1] == 'y' ){
3	$('.suggestion', parent).text('yahoo.com').show();
4	}

Vorschlagen von Domains, deren Anfangsbuchstaben übereinstimmen

Jetzt wollen wir 'msn.com' und auch 'me.com' vorschlagen. Beide beginnen mit 'm', daher werden wir eine verschachtelte if/else-Anweisung ausführen. Wir gehen davon aus, dass 'msn.com' die am weitesten verbreitete Domain-Adresse ist, also schlagen wir sie zuerst vor:

 
else if ( value[a_pos+1] == 'm' ){ 
	if ( value[a_pos+2] == 'e' ){ 
		$('.suggestion', parent).text('me.com').show(); 
	} else { 
		$('.suggestion', parent).text('msn.com').show(); 
	} 
}

Dieser Code sagt: "Wenn das Zeichen NACH dem '@'-Symbol 'm' ist, dann führe den Code darin aus". Der Code darin sagt: "Wenn das ZWEITE Zeichen NACH dem Symbol "@" ein "e" ist, schlagen Sie "me.com" vor. Schlagen Sie andernfalls 'msn.com' vor.

Was ist, wenn es keine Übereinstimmungen gibt?

Was ist, wenn der Benutzer etwas wie "john@z" eingibt? Wir haben keine Vorschläge für E-Mail-Domains, die mit dem Buchstaben "z" beginnen. Am Ende unserer if/else if-Anweisungen werden wir also eine else-Anweisung einfügen, die das Vorschlagsfeld verbirgt. Dies bedeutet im Grunde: "Wenn keine Vorschläge vorhanden sind, die mit der Eingabe des Benutzers übereinstimmen, blenden Sie das Vorschlagsfeld aus."

1
2	else { //if none match, hide the tooltip
3	$('.suggestion', parent).hide();
4	}

Schritt 23: Schließen der a_pos if/else-Anweisung

Wenn Sie sich von früher erinnern, hatten wir eine if/else-Anweisung wie diese:

 
if (a_pos != -1) {  
	// @ has been entered 
} else { 
	// @ has not been entered yet 
}

Wir haben alle Vorschläge für E-Mail-Domains eingefügt, WENN ein '@'-Symbol eingegeben wurde. Wenn das '@'-Symbol nicht eingegeben wurde, blenden wir das Vorschlagsfeld einfach aus. (Das heißt, wenn der Benutzer "john@y" eingibt, wird das Vorschlagsfeld "yahoo.com" angezeigt die Löschtaste verschwindet das Vorschlagsfeld).

1
2	else {
3	$('.suggestion', parent).hide();
4	}

Unser gesamter Keyup-Code

Unser gesamter Codeblock für den Tastendruck eines Benutzers sieht also so aus:

 
// Every keyup watches for the entering of a domain 
$("input[type=email]").keyup(function () { 
 
	// We need to define the following variables 
	//		1. Define the parent element. We use this in selecting the context of the input[type=email] in focus 
	//		2. Get the current input value 
	//		3. Get the position of the '@' symbol 
	 
	var parent =  $(this).parent(); 
	var value = $(this).val(); 
	var a_pos = value.indexOf('@'); // value will default to -1 if not entered 
	 
	// If the @ symbol has been entered, execute the suggested function			 
	if (a_pos != -1) {  
		 
		// If the character AFTER the '@' symbol matches any of the following email domains, suggest them 
		if ( value[a_pos+1] == 'a' ){ 
			$('.suggestion', parent).text('aol.com').show(); 
		} 
		else if ( value[a_pos+1] == 'c' ){ 
			$('.suggestion', parent).text('comcast.net').show(); 
		} 
		else if ( value[a_pos+1] == 'g' ){ 
			$('.suggestion', parent).text('gmail.com').show(); 
		} 
		else if ( value[a_pos+1] == 'h' ){ 
			$('.suggestion', parent).text('hotmail.com').show(); 
		} 
		else if ( value[a_pos+1] == 'm' ){ //  "msn" is more popular, so it is the default suggestion for just the letter 'm' 
			if ( value[a_pos+2] == 'e' ){ 
				$('.suggestion', parent).text('me.com').show(); 
			} else { 
				$('.suggestion', parent).text('msn.com').show(); 
			} 
		} 
		else if ( value[a_pos+1] == 'l' ){ 
			$('.suggestion', parent).text('live.com').show(); 
		} 
		else if ( value[a_pos+1] == 'y' ){ 
			$('.suggestion', parent).text('yahoo.com').show(); 
		} 
		else { //if none match, hide the tooltip 
			$('.suggestion', parent).hide(); 
		} 
		 
	} else { 
		$('.suggestion', parent).hide(); 
	} 
});

Wenn Sie dies im Browser testen, werden Vorschläge entsprechend der E-Mail-Domain-Adresse angezeigt, die Sie eingeben möchten. Wenn Sie darauf klicken, wird jedoch nichts bewirkt – das ist unser nächster Schritt!

Schritt 24: Anhängen der vorgeschlagenen E-Mail-Domain

Was passiert also, wenn der Benutzer auf einen unserer E-Mail-Domain-Vorschläge klickt? Wir müssen die vorgeschlagene Domäne an alles anhängen, was sie bisher eingegeben haben.

Nehmen wir zum Beispiel an, der Benutzer hat "john@a" eingegeben. Dadurch wird der Domainvorschlag "aol.com" angezeigt. Wenn der Benutzer auf diesen Vorschlag klickt, möchten wir ihm die Mühe ersparen, den Rest der Adresse einzugeben und an seine bisherige Eingabe anzuhängen. Der Wert des Eingabefelds ändert sich also von "john@a" zu "john@aol.com"!

Um dies zu erreichen, müssen wir darauf achten, wenn ein Benutzer auf ein Vorschlagsfeld klickt. Lassen Sie uns dafür jQuery beobachten:

1
2	$('.suggestion').click(function() {
3	//code here if user clicks on the suggestion box
4	});

Schritt 25: Deklarieren der Variablen, die wir benötigen

Um die vorgeschlagene E-Mail-Domain, die der Benutzer auswählt, richtig anzuhängen, benötigen wir einige Variablen.

Übergeordneter Kontext

Zuerst müssen wir das übergeordnete Element des Vorschlagsfelds auswählen, auf das geklickt wurde. Dies wird wiederum für die Auswahl im Kontext des fokussierten Eingabefeldes verwendet.

1
2	var parent = $(this).parent();

Der Vorschlag für eine E-Mail-Domain

Wir müssen wissen, was der eigentliche Vorschlag ist, den wir dem Benutzer machen. Wenn wir zum Beispiel "aol.com" vorschlagen, speichern wir diesen Wert in einer Variablen. Da wir uns im aktuell angeklickten Vorschlagsfeld befinden, verwenden wir die $(this)- und die text()-Methode von jQuery, um den Wert des Vorschlags abzurufen.

1
2	var suggested_val = $(this).text();

Der aktuelle Eingabewert des Benutzers

Wir müssen wissen, was der Benutzer bisher eingegeben hat. Wenn sie also "john@a" eingegeben haben, speichern wir diesen Wert in einer Variablen. Hier verwenden wir die übergeordnete Variable, die wir zuvor für den Auswahlkontext festgelegt haben (da wir nicht alle Vorkommen der Klasse 'Vorschlag' auswählen möchten, möchten wir nur diejenige, auf die geklickt wurde).

1
2	var input_val = $('input[type=email]', parent).val();

Position des @-Symbols

Auch hier müssen wir die Position des '@'-Symbols in der vom Benutzer eingegebenen Zeichenfolge kennen. Daher verwenden wir die zuvor verwendete indexOf-Methode. Dies überprüft die Variable input_val (was der Benutzer bisher eingegeben hat) und sucht nach der Position des '@'-Symbols.

1
2	var a_pos = input_val.indexOf('@');

E-Mail-Benutzername

Wenn der Benutzer auf "aol.com" klickt, wissen wir, dass seine E-Mail-Domain "@aol.com" ist. Wir müssen also alles, was sie eingegeben haben, VOR dem '@'-Symbol abrufen. Das ist ihr E-Mail-Benutzername. Sobald wir diesen Wert haben, können wir die vorgeschlagene E-Mail-Domain daran anhängen.

Dazu erstellen wir eine Variable namens before_a und setzen sie gleich dem Ergebnis der Methode substr.

Die Methode substr wird für die Variable input_val verwendet (der aktuell vom Benutzer in das Eingabefeld eingegebene Wert). Es extrahiert die Zeichen aus einer Zeichenfolge, die bei den von uns angegebenen Parametern beginnt und endet.

1
2	var before_a = input_val.substr(0, a_pos);

Schritt 26: Anhängen des Vorschlags

Nachdem wir nun alle unsere Variablen eingerichtet haben, können wir die vorgeschlagene E-Mail-Domäne anhängen, auf die der Benutzer geklickt hat. Wir tun dies, indem wir das Eingabefeld auswählen, auf das sie sich konzentrieren (wir können dies im Kontext ihres übergeordneten Elements tun, wie zuvor erläutert) und dann den Wert der Eingabe mit den von uns eingerichteten Variablen festlegen:

1
2	$('input[type=email]', parent).val(before_a+'@'+suggested_val);

Dadurch wird der Wert der Eingabe auf das festgelegt, was der Benutzer bis zum '@'-Symbol, dem '@'-Symbol selbst und dann der vorgeschlagenen E-Mail-Domäne eingegeben hat, auf die er geklickt hat.

Vergessen Sie nicht, das Vorschlagsfeld auszublenden, sobald der Benutzer darauf klickt:

1
2	$(this).hide();

Für eine visuellere Darstellung dessen, was wir hier gemacht haben, sehen Sie sich dieses Bild an:

Unser gesamter Code zum Anhängen der vorgeschlagenen E-Mail-Domain

 
$('.suggestion').click(function() { 
 
	// Define the following variables: 
	// These will be used to concatenate the suggested email domain to whatever the user has entered thus far: 
	//		1. Email domain suggestions  
	//		2. Current input value from user 
	//		3. Position of the '@' symbol 
	//		4. Current value before the '@' symbol 
	 
	//		Also get the parent element for context of input[type=email] 
	var parent = $(this).parent(); 
	var suggested_val = $(this).text(); //currently suggested email domain 
	var input_val = $('input[type=email]', parent).val(); //current input value by user 
	var a_pos = input_val.indexOf('@'); //position of '@' symbol in input value 
	var before_a = input_val.substr(0, a_pos); //value of email address before '@' symbol 
	 
	 
	 
	// Concatenate the suggested email domain to the current value suggested by the user 
	$('input[type=email]', parent).val(before_a+'@'+suggested_val); 
	$(this).hide();			 
});

Schritt 27: Ausblenden des Vorschlagsfelds

Was ist, wenn der Benutzer eine E-Mail-Adresse eingibt und den von uns bereitgestellten Vorschlag für eine E-Mail-Domain nicht verwendet? Wenn sie außerhalb des Eingabefelds klicken (Unschärfeereignis), müssen wir den Vorschlag ausblenden, da er nicht mehr relevant ist. Also machen wir das mit dem folgenden Code:

1
2	$('input[type=email]').blur(function() {
3	$('.suggestion').hide();
4	});

Dabei gibt es jedoch ein Problem. Wenn der Benutzer auf den Vorschlag klickt, wird nicht nur die Funktion $('.suggestion').click ausgelöst, sondern auch die Funktion $('input[type=email]').blur (da das Vorschlagsfeld befindet sich außerhalb des Eingabeelements). Dies führt dazu, dass unsere vorgeschlagene E-Mail-Domain nicht wirklich angehängt wird. Also müssen wir das beheben.

Schritt 28: Ausblenden des Vorschlagsfelds: Ein Fix

Wir können dieses Problem lösen, indem wir Mausereignisse in der Vorschlagsbox mithilfe einer booleschen Variablen verfolgen.

Wir erstellen eine Variable namens "mouseOver". Es ist ziemlich selbsterklärend. Wenn der Benutzer den Mauszeiger über das Vorschlagsfeld bewegt, setzen wir seinen Wert auf "true". Wenn sie den Mauszeiger verlassen (oder den Mauszeiger nicht über das Vorschlagsfeld bewegen), wird die Variable "mouseOver" auf false zurückgesetzt (dies ist der Standardwert).

 
var mouseOver = false; 
$('.suggestion').mouseover(function() {  
	mouseOver = true;  
	}) 
.mouseout(function() { 
	mouseOver = false;  
});

Anpassen der Funktion, die das Vorschlagsfeld ausblendet

Jetzt, da wir wissen, ob der Benutzer tatsächlich über das Vorschlagsfeld fährt und darauf klickt, passen wir den Code aus dem vorherigen Schritt an:

 
$('input[type=email]').blur(function() { 
	if ( !(mouseOver) ){  
		$('.suggestion').hide(); 
	} 
});

Was wir getan haben

Die Idee hier ist, die Absicht des Benutzers zu entdecken. Wenn sie den Mauszeiger über das Vorschlagsfeld bewegen, wissen wir, dass sie darauf klicken möchten. Wenn sie jedoch nicht mit der Maus darüber fahren und dann außerhalb des Eingabefelds (Unschärfe) klicken, können wir den Code ausführen, um das Vorschlagsfeld auszublenden, da wir wissen, dass der Benutzer nicht vorhatte, darauf zu klicken!

Nun sollte unser Code zum Ausblenden des Vorschlagsfelds so aussehen:

 
// we need to track mouse events on the suggestion field. If the user is hovering over the suggestion,  
// 		it will execute the insert_suggestion 
//		otherwise, on mouseout it will hide the suggestion  
var mouseOver = false; //default state is false 
$('.suggestion').mouseover(function() {  
	mouseOver = true;  
	}) 
.mouseout(function() { 
	mouseOver = false;  
}); 
 
 
//hide suggestion when field is out of focus 
$('input[type=email]').blur(function() { 
	if ( !(mouseOver) ){  
		$('.suggestion').hide(); 
	} 
});

Schritt 29: Unser endgültiger vollständiger Code

Unser endgültiger Javascript-Code mit Kommentaren sieht jetzt so aus:

 
$(document).ready(function() { 
	 
	// Insert the <span> tag. This will be the suggestion box  
	$('<span class="suggestion"></span>').insertAfter('input[type=email]').hide(); 
	 
	// Every keyup watches for the entering of a domain 
	$("input[type=email]").keyup(function () { 
	 
		// We need to define the following variables 
		//		1. Define the parent element. We use this in selecting the context of the input[type=email] in focus 
		//		2. Get the current input value 
		//		3. Get the position of the '@' symbol 
		 
		var parent =  $(this).parent(); 
		var value = $(this).val(); 
		var a_pos = value.indexOf('@'); // value will default to -1 if not entered 
		 
		// If the @ symbol has been entered, execute the suggested function			 
		if (a_pos != -1) {  
			 
			// If the character AFTER the '@' symbol matches any of the following email domains, suggest them 
			if ( value[a_pos+1] == 'a' ){ 
				$('.suggestion', parent).text('aol.com').show(); 
			} 
			else if ( value[a_pos+1] == 'c' ){ 
				$('.suggestion', parent).text('comcast.net').show(); 
			} 
			else if ( value[a_pos+1] == 'g' ){ 
				$('.suggestion', parent).text('gmail.com').show(); 
			} 
			else if ( value[a_pos+1] == 'h' ){ 
				$('.suggestion', parent).text('hotmail.com').show(); 
			} 
			else if ( value[a_pos+1] == 'm' ){ //  "msn" is more popular, so it is the default suggestion for just the letter 'm' 
				if ( value[a_pos+2] == 'e' ){ 
					$('.suggestion', parent).text('me.com').show(); 
				} else { 
					$('.suggestion', parent).text('msn.com').show(); 
				} 
			} 
			else if ( value[a_pos+1] == 'l' ){ 
				$('.suggestion', parent).text('live.com').show(); 
			} 
			else if ( value[a_pos+1] == 'y' ){ 
				$('.suggestion', parent).text('yahoo.com').show(); 
			} 
			else { //if none match, hide the tooltip 
				$('.suggestion', parent).hide(); 
			} 
			 
		} else { 
			$('.suggestion', parent).hide(); 
		} 
	}); 
	 
	 
	 
	// Add the domain to the currently entered value 
	$('.suggestion').click(function() { 
	 
		// Define the following variables: 
		// These will be used to concatenate the suggested email domain to whatever the user has entered thus far: 
		//		1. Email domain suggestions  
		//		2. Current input value from user 
		//		3. Position of the '@' symbol 
		//		4. Current value before the '@' symbol 
		 
		//		Also get the parent element for context of input[type=email] 
		var parent = $(this).parent(); 
		var suggested_val = $(this).text(); //currently suggested email domain 
		var input_val = $('input[type=email]', parent).val(); //current input value by user 
		var a_pos = input_val.indexOf('@'); //position of '@' symbol in input value 
		var before_a = input_val.substr(0, a_pos); //value of email address before '@' symbol 
		 
		 
		 
		// Concatenante the suggested email domain to the current value suggested by the user 
		$('input[type=email]', parent).val(before_a+'@'+suggested_val); 
		$(this).hide();			 
	}); 
	 
	 
	// we need to track mouse events on the suggestion field. If the user is hovering over the suggestion,  
	// 		it will execute the insert_suggestion 
	//		otherwise, on mouseout it will hide the suggestion  
	var mouseOver = false; //default state is false 
	$('.suggestion').mouseover(function() {  
		mouseOver = true;  
		}) 
	.mouseout(function() { 
		mouseOver = false;  
	}); 
	 
	 
	//hide suggestion when field is out of focus 
	$('input[type=email]').blur(function() { 
		if ( !(mouseOver) ){  
			$('.suggestion').hide(); 
		} 
	}); 
 
});

Herzliche Glückwünsche! Sie haben ein responsives Webformular erstellt, das Benutzern mit beliebten E-Mail-Domänenadressen hilft. Es gibt einige Verbesserungen, die an diesem Skript vorgenommen werden könnten. Was ist beispielsweise, wenn der Benutzer "john"@microsoft.com" eingibt? Der Vorschlag "@msn.com" wird tatsächlich angezeigt, bis er sich nicht mehr auf das Eingabefeld konzentriert. Sie könnten eine Codezeile hinzufügen, die den Vorschlag ausblendet, wenn der Benutzer nicht innerhalb einer bestimmten Anzahl von Zeichen darauf klickt. Wenn sie beispielsweise "john @micro" eingeben, können wir davon ausgehen, dass sie den von uns bereitgestellten Vorschlag nicht verwenden möchten. An diesem Punkt könnten wir unseren Vorschlag ausblenden.

Spielen Sie mit dem Skript und HTML herum und sehen Sie, welche Ergänzungen Sie vornehmen könnten, um die Benutzererfahrung beim Ausfüllen von Formularen zu verbessern!