Mittwoch, 19. November 2008
Zweifarbige Input-Elemente im Browser
In einer Web-Oberfläche gibt es im Wesentlichen zwei Möglichkeiten, einen Benutzer auf eine fehlerhafte Eingabe hinzuweisen: Durch farbliche Hervorhebung der Eingabe und durch eine entsprechende Anmerkung am Eingabe-Element.
Für eine typische Login-Registrierung oder eher selten genutzte Formulare ist dieser Weg auch ideal - anders sieht es aber häufig verwendeten Webanwendungen aus. In einem täglich genutzten CMS nerven die ewig gleichen Hinweise schnell. Vor allem, wenn der Anwender schon im Vorfeld weiß, dass seine Eingabe im Moment nicht korrekt ist.
Noch interessanter wird es, wenn es sowohl harte als auch weiche Kriterien für einen Eingabefeld gibt. Die Länge der Überschrift eines Artikels ist ein typisches Beispiel: Das entsprechende Feld in der Datenbank hat eine maximale Länge - es ist das harte Kriterium. Zumeist gibt es aber auch ein redaktionelles oder layout-bedingtes Limit, um umbrochene Überschriften zu vermeiden - ein weiches Kriterium. "Weich" weil davon abgewichen werden kann, wenn die Umstände es erfordern.
Nun kann man das harte Kriterium durchsetzen, in dem man die erlaubte Textlänge in einem Input-Element einfach mit dem maxlength-Attribut begrenzt. Das weiche Kriterium sollte aber dezenter umgesetzt werden. Eine klassische Fehlermeldung nervt, wie oben angesprochen. Insbesondere bei mehrstufigen Produktionsabläufen, wenn zum Beispiel ein Redakteur die Überschrift nur grob vorgibt und die endgültige Formulierung der Textchefin überlassen wird.
Ideal wäre eine dezente Warnung: Überschreitet Text die empfohlene Länge, wird der überlange Teil in einer anderen Textfarbe angezeigt.
Wir können das klassische Input-Element mit CSS recht umfangreich manipulieren, allerdings nur komplett, nicht einzelne Buchstaben. Vordergründig gibt es keine Möglichkeit, Text in verschiedenen Farben innerhalb eines Input-Elementes darzustellen, man könnte sich nur sehr aufwändig eine Lösung auf Basis des Design-Modus eines IFrames bauen.
Doch gibt es wirklich keine "einfache" Lösung? Mit ein wenig Nachdenken: Ja! Sie besteht darin, ein normales Input-Element zu nehmen, es per CSS halb transparent zu machen und nach jedem Tastendruck den Inhalt in ein Div-Element zu kopieren, das direkt darunter liegt.
Das war zu schnell? Ok, Schritt für Schritt.
Wir benötigen zu erst den entsprechenden HTML-Code mit einem Input-Element und einem Div:
<body onload="init()"> <input type="text" id="a" maxlength="30"> <div id="b"></div> </body>
Diese werden per CSS formatiert. Beide Elemente müssen unmittelbar übereinander liegen, das Input-Element muss unbedingt über dem Div liegen. Die Textfarbe des Input-Elements ist rot, die des Div-Elementes schwarz:
<style type="text/css">
#a {
font-family : sans-serif;
font-size : 20px;
padding: 1px;
margin : 1px;
padding-top : 2px;
color : red;
border : 1px solid black;
width: 400px;
height: 28px;
opacity : 0.0;
position : absolute;
left : 10px;
top : 10px;
z-index : 2;
}
#b {
font-family : sans-serif;
font-size : 20px;
padding: 1px;
margin : 1px;
color : black;
border : 1px solid black;
width: 396px;
height : 24px;
position : absolute;
left : 10px;
top : 10px;
z-index : 1;
}
</style>
Beim onload-Ereignis hängen wir eine JavaScript-Funktion ein, hier init(). Die Funktion macht nichts anderes als ihrerseits eine Funktion an den keyup-Event des Input-Elements zu hängen:
<script type="text/javascript">
var MaxChars = 10;
function init() {
var a = document.getElementById('a');
var b = document.getElementById('b');
a.onkeyup = function() {
if(this.value.length < MaxChars) {
b.innerHTML = this.value;
} else {
b.innerHTML = this.value.substr(0, MaxChars);
}
}
}
</script>
Die Logik des Event-Handlers ist brutal einfach: Wenn die Länges des Textes eine maximale Zeichenanzahl (MaxChars) nicht übersteigt, dann wird einfach der Text in das Div-Element kopiert. Befinden sich mehr Zeichen darin, werden nur die MaxChars-Anzahl Zeichen kopiert.
Praktisch können Sie es sich hier anschauen: http://www.alexander-merz.com/spiel/red.html
Der Trick der Lösung liegt darin, dass der schwarze Text des Div-Elementes die halb-transparente rote Text-Farbe des Eingabe-Elements überstrahlt. Wenn der Text aber länger als die vorgegebene Anzahl ist, dann ist nur noch der Text des Eingabe-Elementes sichtbar - und der ist eben rot.
Angenehmer Nebeneffekt dieser Lösung ist, dass Copy&Paste, Fokussierung und browserbasierende Auto-Vervollständigung weiterhin normal funktionieren.
Leider zeigt die obige Demo auch ihre Schattenseiten: Je nach Browser ist eine deutliche Latenz zwischen roter Eingabe und Schwarzfärbung sichtbar, nur Google Chrome und Safari scheinen unter Windows schnell genug. Und durch die Transparenz führt leider zu einem wahrnehmbaren "schmutzigen" Schwarz.
