Verbesserte Hervorhebung des aktiven Felds in Formularen

DEMO ANZEIGEN

Aus Gründen der Benutzerfreundlichkeit und Ästhetik ist es gut, eine Art visuelles Feedback bei Webformularen hinzuzufügen, um das aktuell **aktive** (oder „fokussierte“) Feld anzuzeigen. Einige Browser (Safari/Opera) haben entschieden, dass dies **so** wichtig ist, dass sie die Angelegenheit selbst in die Hand nehmen und einen leuchtend blauen Rahmen um aktive Formularelemente legen.

Für Nicht-Safari/Opera-Browser bietet CSS durch die :focus-Pseudoklasse *etwas* Hilfe. Sie können Ihre eigenen Fokusstile wie folgt deklarieren:

input:focus {
      background: #fc9fff;   /* sexy hot pink */
}

Das ist ein guter Anfang, hat aber einige bedauerliche Schwächen

• Es funktioniert in einigen Browsern nicht (IE)
• Es hebt nur das Feld selbst hervor und tut nichts für das dazugehörige Label

Wir werden beide Schwächen angehen und unsere aktuelle Feldhervorhebung mit jQuery verbessern. Unser Formular-HTML wird wie jede andere Formular-Markup aussehen, mit der Ausnahme, dass jede Label/Input-Gruppe in eine DIV eingeschlossen wird.

<form>
	<div class="single-field">
		<label for="Name">Name:</label>
		<input name="Name" type="text"></input>
	</div>
	<div class="single-field">
		<label for="Email">Email:</label>
		<input name="Email" type="text"></input>
	</div>
</form>

Mit jQuery können wir ein Ereignis abwarten, bei dem ein Eingabeformular in den Fokus gerät.

$(document).ready(function(){
	$("input").focus(function() {
		....do something....
	});
});

Hier können wir etwas Cooles tun, was reines CSS allein nicht kann: Wir können zum Elternelement dieses Eingabeelements springen und es beeinflussen. In unserem Fall ist das Elternelement das DIV-Wrapper, das wir um jedes Label/Input-Paar gelegt haben. Was wir tun möchten, ist, diesem DIV eine eindeutige Klasse zuzuweisen, wenn die Eingabe in den Fokus gerät.

$(document).ready(function(){
	$("input").focus(function() {
		$(this).parent().addClass("curFocus");
	});
});

Mit CSS können wir diese eindeutige Klasse nach Belieben gestalten!

div.curFocus {
	background: #fdecb2;
}

Das funktioniert gut, aber wenn wir es so belassen würden, würde jedem Feld diese Klasse zugewiesen, wenn es in den Fokus gerät, und sie würde nie wieder entfernt. Der Sinn der Sache ist, dass diese „aktive Feldhervorhebung“ nur dem „aktiven Feld“ zugewiesen wird. Glücklicherweise bietet uns jQuery ein „blur“-Ereignis, das das Gegenteil von Fokus ist. Bringen wir den Code dafür ein:

$(document).ready(function(){
	$("input").focus(function() {
		$(this).parent().addClass("curFocus")
	});
	$("input").blur(function() {
		$(this).parent().removeClass("curFocus")
	});
});

Wir müssten „curFocus“ nicht unbedingt bei der removeClass-Funktion angeben, da das Leeren davon alle Klassen entfernt, aber nur für den Fall, dass wir mehrere Klassen haben, belassen wir es dabei.

Aber warten Sie mal! Ihr Beispiel hat supercoole abgerundete Ecken bei den aktiven Feldern! Haha, das stimmt! Ich werde es Ihnen nie verraten! Äh. Ähm. OK, ich verrate es doch.

Jede der vier Ecken ist eine kleine DIV, die in jede unserer Feld-Wrapper-DIVs eingefügt werden muss. Da sie alle exakt gleich sind und sich innerhalb jedes Wrapper-DIVs befinden müssen, lassen wir sie durch jQuery anwenden und sparen uns unnötige wiederholte Markup.

...es gibt etwas zutiefst Befriedigendes daran, semantisches Markup dynamisch von JavaScript generieren zu lassen. Aus: Learning JQuery von Karl Swedberg & Jonathan Chaffer

Ich stimme zu. Wir können jeden HTML-Schnipsel in ein jQuery-Objekt umwandeln. Dann verwenden wir die Funktion „appendTo“, um ihn in jedes DIV einzufügen. Schauen Sie sich das an:

$('<div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div>').appendTo("div.single-field");

In unserem CSS gestalten wir sie, aber lassen ihre display-Werte auf „none“, damit sie nicht angezeigt werden, bis wir sie wollen.

.tl {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-topleft.jpg);
	display: none;
}
.tr {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-topright.jpg);
	display: none;
}
.bl {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-bottomleft.jpg);
	display: none;
}
.br {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-bottomright.jpg);
	display: none;
}

Wir verwenden jQuery, um die Sichtbarkeit all dieser DIVs ein- und auszuschalten, wenn wir sie brauchen. Hier ist das endgültige JavaScript:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("input").focus(function() {
			$(this)
				.parent()
					.addClass("curFocus")
				.children("div")
					.toggle();
		});
		$("input").blur(function() {
			$(this)
				.parent()
					.removeClass("curFocus")
				.children("div")
					.toggle();
		});
		$('<div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div>').appendTo("div.single-field");
	});
</script>

DEMO ANZEIGEN