Antwort an „Rolf B“ verfassen

Hallo Sven,

Jedesmal eine Klasse definieren für diese Felder?

Nicht unbedingt. Was haben diese Felder gemeinsam? Wenn es name="PLZ" ist, kannst Du einen Attributselektor verwenden.

input[name=PLZ] {
   width: 5ch;
}
input[name=PLZ]:invalid {
   outline: 2px solid red;
}

Die zweite Regel erzeugt einen roten Rand, sobald das Pattern verletzt wird. Das könnte man als Workaround für "lass keine Buchstaben zu" verwenden. Leider muss man das Pattern dann unspezifischer machen als nötig, denn eigentlich wäre ja pattern="[0-9]{5}" ideal – genau 5 Ziffern. Aber das führt mit der :invalid-Regel dazu, dass eine korrekte PLZ während er Eingabe errötet, bis alle 5 Stellen drin sind. Das Pattern "[0-9]+" hingegen errötet zuverlässig, sobald ein Zeichen reinkommt, das keine ASCII-Ziffer ist.

Um Buchstaben direkt bei der Eingabe zu verhindern, brauchst Du JavaScript.

Rolf

--
sumpsi - posui - obstruxi
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen