Input Feld soll nur num. Werte zulassen

[Sven]

Hi,

wie kann ich erreichen, dass ein input-Feld nur numerische Eingaben ermöglicht? Ich habe es mit type="number" versucht, das bewirkt allerdings etwas ganz anderes.

Und wie kann ich ein Eingabefeld kürzer machen wenn ich die Felder mit

  display: grid;
  max-width: 50%;
  gap: 0.5rem 2rem;
  grid-template-columns: auto 1fr;  

definiere.

Das erste Feld in einer Zeile ist jeweils die Textbezeichnung des danebenstehenden Eingabefeldes.

Nun möchte ich allerdings z.B. für die Postleitzahl ein kürzeres Feld als für den Ort.

[Jonathan Harker]

Hallo Sven,

wie kann ich erreichen, dass ein input-Feld nur numerische Eingaben ermöglicht?

Ich habe es mit type="number" versucht, das bewirkt allerdings etwas ganz anderes.

Ehrlich? glaub ich nicht!

Ansonsten:

<label>Gib eine Zahl ein:
  <input type="text" pattern="[0-9]+" title="Nur Zahlen!">
</label>

Das pattern-Attribut erlaubt nur 1-9, aber keine , - willst du so was???

Sonst müsste man das pattern erweitern.

inputmode="numeric"öffnet auf dem Handy die Zahleneingabe -
ich würde trotzdem type="number" verwenden.

Bis bald!
Jonathan

[Gunnar Bittersmann]

@@Jonathan Harker

inputmode="numeric"öffnet auf dem Handy die Zahleneingabe -
ich würde trotzdem type="number" verwenden.

Wenn es um Postleitzahlen geht, ist das falsch, denn Postleitzahlen sind keine Zahlen.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Sven

Das erste Feld in einer Zeile ist jeweils die Textbezeichnung des danebenstehenden Eingabefeldes.

Keine so gute Idee. Die Beschriftung sollte immer^[1] über dem Eingabefeld stehen, nicht daneben; siehe Seite 31.

🖖 Live long and prosper

---

1. außer bei Checkboxen und Radiobuttons ↩︎

[Sven]

Hallo,

Dass die Beschriftung vor dem Eingabefeld stehen soll, ist für den PC so gewünscht (an schmalen Geräten darf es anders sein).

Ich habe es jetzt mit folgendem versucht.

CSS

.Eingabemenu {
  display: grid;
  max-width: 50%;
  gap: 0.5rem 2rem;
  grid-template-columns: auto 1fr;  
  }

html

       <div>
	     <label for="PLZ">PLZ:</label>
	   </div>
       <input id="PLZ" name="PLZ" value="$PLZ" type="number" pattern="[0-9]+" style="width: 7rem;">

1. type="number" öffnet ein Auswahlfeld, das nicht erwünscht ist

2. Trotz pattern="[0-9]+" ist die Eingabe von Buchstaben möglich

Anmerkung: Die style-Angabe habe ich provisorisch gemacht, da ich noch keine Lösung für mein 2. Problem erhalten habe.

[Gunnar Bittersmann]

@@Sven

Dass die Beschriftung vor dem Eingabefeld stehen soll, ist für den PC so gewünscht

Von wem? Von irgendeinem Nutzer?

Und „gewünscht“ heißt nicht gut. Es ist schlechtes Design.

Ich hab dir das mal aufgemalt:

• Im ersten Beispiel flattern die Eingabefelder. Sieht blöd aus.

• Im zweiten Beispiel geht der Zusammenhang zwischen der Beschriftung „Passwort“ und dem Eingabefeld völlig verloren. Auch schlecht.

• Im dritten Beispiel flattert nichts und die Beschriftungen sind klar ihren zugehörigen Eingabefeldern zugeordnet. Es gibt nur eine Richtung der Anordnung: von oben nach unten. Und nicht kreuz und quer wie in den vorigen Beispielen.

  TL;DR: So sollten Formulare aussehen.

🖖 Live long and prosper

[Sven]

Schön, ich werde das gute Beispiel vorschlagen. Was ich aber vermutlich nicht durchsrtzen kann, ist dass die DEUTSCHE Postleitzahl ein Eingabefeld hat, das die gleiche Länge hat wie der Name u.a.

[Gunnar Bittersmann]

@@Sven

Schön, ich werde das gute Beispiel vorschlagen.

👍

Was ich aber vermutlich nicht durchsrtzen kann, ist dass die DEUTSCHE Postleitzahl ein Eingabefeld hat, das die gleiche Länge hat wie der Name u.a.

Ja, das ist durchaus sinnvoll, dass Eingabefelder, die nur eine kurze Eingabe erwarten, Nutzern nicht suggerieren, sie sollten einen Roman da reinschreiben. Dass also bspw. ein PLZ-Eingabeld nur so breit ist wie fünf Ziffern.

Fünf ist Trümpf.

(Wem das noch was sagt, ist alt. Und für die anderen ein Spiegel-Artikel dazu.)

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Sven

?? Auswahlfeld? Nö. Meinst du die Pfeiltasen zum Hoch- und Runterzählen? Ja, die dürften hier (wie in vielen anderen Fällen) nicht erwünscht sein.

Aber type="number" ist ja sowieso falsch. Erwähnte ich schon, das Postleitzahlen keine Zahlen sind?

---

2. Trotz pattern="[0-9]+" ist die Eingabe von Buchstaben möglich

Ja, aber nicht das Abschicken des Formulars.

Du willst das Verhalten wie das von Chromium-Browsern bei type="number"?

IMHO mal wieder so eine blöde Schnapsidee von Chrome-Entwicklern. Ich finde das ziemlich problematisch, dass da auf Nutzereingaben keinerlei Reaktion erfolgt. Stattdessen müsste eine Anzeige erfolgen, warum das System bei diesem Eingabefeld keine Buchstaben annimmt.

Wenn du solch eine Rückmeldung schon bei der Eingabe und nicht erst beim Abschicken des Formulars willst, musst du das wohl mit JavaScript implementieren.

---

       <input … style="width: 7rem;">

Anmerkung: Die style-Angabe habe ich provisorisch gemacht, da ich noch keine Lösung für mein 2. Problem erhalten habe.

Sie ist falsch. Die Breite sollte sich nicht auf die Schriftgröße des Wurzelelements beziehen, sondern auf die Schriftgröße des Eingabefeldes.

---

       <div>
	     <label for="PLZ">PLZ:</label>
	   </div>

Kann man machen. Ich finde aber die Variante ohne div charmanter. label stylen:

	label {
		display: block;
		width: fit-content;
	}

🖖 Live long and prosper

[Sven]

---

       <input … style="width: 7rem;">

Anmerkung: Die style-Angabe habe ich provisorisch gemacht, da ich noch keine Lösung für mein 2. Problem erhalten habe.

Sie ist falsch. Die Breite solle sich nicht auf die Schriftgröße des Wurzelelements beziehen, sondern auf die Schriftgröße des Eingabefeldes.

Mache ich dies mit em statt rem oder?

[Gunnar Bittersmann]

@@Sven

Sie ist falsch. Die Breite solle sich nicht auf die Schriftgröße des Wurzelelements beziehen, sondern auf die Schriftgröße des Eingabefeldes.

Mache ich dies mit em statt rem oder?

Schon besser. Noch besser mag aber eine Einheit sein, die sich nicht auf die Höhe, sondern die Breite der Zeichen bezieht: ch.

🖖 Live long and prosper

[MudGuard]

Hi,

Erwähnte ich schon, das Postleitzahlen keine Zahlen sind?

Erwähnte ich schon, dass das das das dass nicht ersetzen kann?

(wobei ich ja finde, daß das dass das daß auch nicht ersetzen kann)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Erwähnte ich schon, dass das das das dass nicht ersetzen kann?

wenn hinter fliegen fliegen fliegen fliegen fliegen fliegen nach

(absichtlich ohne Großbuchstaben und Satzzeichen 😆)

(wobei ich ja finde, daß das dass das daß auch nicht ersetzen kann)

Ich finde, doch. Ich mag nur nicht, wenn Leute Spass haben und das auch so sagen. So viel Zeit für ein langes A muss sein.

🖖 Live long and prosper

[MudGuard]

Hi,

Erwähnte ich schon, dass das das das dass nicht ersetzen kann?

wenn hinter fliegen fliegen fliegen fliegen fliegen fliegen nach

das hatte ich dabei im Hinterkopf …

Ich finde, doch. Ich mag nur nicht, wenn Leute Spass haben und das auch so sagen. So viel Zeit für ein langes A muss sein.

das ist doch genau das Problem - es sollte eine Vereinheitlichung werden, ist aber eine Veruneinheitlichung geworden.

Vorher: 2 aufeinanderfolgende s in einer Silbe ⇒ scharfes s.

Jetzt: je nach Aussprache, lang ⇒ scharfes s, kurz ⇒ Doppel-s

(der Österreicher/Wiener spricht vom Geschooooß, der Deutsche vom Geschossss).

Das von Dir genannte Spassss und Spaaaaß ist da ein weiteres Beispiel …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

das ist doch genau das Problem - es sollte eine Vereinheitlichung werden, ist aber eine Veruneinheitlichung geworden.

Finde ich nicht.

Vorher: 2 aufeinanderfolgende s in einer Silbe ⇒ scharfes s.

Jetzt: je nach Aussprache, lang ⇒ scharfes s, kurz ⇒ Doppel-s

Mir ist das Jetzt lieber. Neben etlichem Unsinn das Beste, was die Rechtschreibreform hervorgebracht hat.

(der Österreicher/Wiener spricht vom Geschooooß, der Deutsche vom Geschossss).

Dass sich regional unterschiedliche Aussprache im Schriftbild widerspiegelt – warum nicht?

Das von Dir genannte Spassss und Spaaaaß ist da ein weiteres Beispiel …

Es scheint eine generelle Tendenz zu geben, Laute zu verkürzen. „Spaß“ ist da nur ein Beispiel, „Politik“ ein anderes, was man als /-​ˈ​tɪk/ statt /-​ˈ​tiːk/ hört. Ich mag’s nicht.

🖖 Live long and prosper

[Der Martin]

Hallo,

Jetzt: je nach Aussprache, lang ⇒ scharfes s, kurz ⇒ Doppel-s

Mir ist das Jetzt lieber. Neben etlichem Unsinn das Beste, was die Rechtschreibreform hervorgebracht hat.

absolument d'accord.

(der Österreicher/Wiener spricht vom Geschooooß, der Deutsche vom Geschossss).

Dass sich regional unterschiedliche Aussprache im Schriftbild widerspiegelt – warum nicht?

Aber das tut sie ja nicht. Auch in Österreich wird Geschoss geschrieben - unabhängig davon, ob von einer Etage eines Gebäudes oder von Munition die Rede ist. Hier wird einfach eine deutsche "Standard-Aussprache" zugrundegelegt, von der aber viele regionale Dialekte abweichen.

Es gibt noch viel krassere Beispiele, Genus zum Beispiel. Im Schwäbischen ist der Butter und das Teller üblich.

Es scheint eine generelle Tendenz zu geben, Laute zu verkürzen. „Spaß“ ist da nur ein Beispiel, „Politik“ ein anderes, was man als /-​ˈ​tɪk/ statt /-​ˈ​tiːk/ hört. Ich mag’s nicht.

Meines Wissens werden alle Fremdwörter, die auf -ik enden, mit kurzem i gesprochen. Technik, Metrik, Gotik, Systematik, Botanik. Warum sollte die Politik da aus dem Rahmen fallen? Mit langem i hört es sich für mich falsch an.

Aber einer meiner Kollegen sagt auch regelmäßig und aus voller Überzeugung "Lidl" mit kurzem i. Ein bisschen wie "Liddl". Da krieg ich immer eine Gänsehaut.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Dass sich regional unterschiedliche Aussprache im Schriftbild widerspiegelt – warum nicht?

Aber das tut sie ja nicht. Auch in Österreich wird Geschoss geschrieben - unabhängig davon, ob von einer Etage eines Gebäudes oder von Munition die Rede ist.

Das habe ich anders in Erinnerung. Und Wiktionary gibt mir recht: Geschoß

Es scheint eine generelle Tendenz zu geben, Laute zu verkürzen. „Spaß“ ist da nur ein Beispiel, „Politik“ ein anderes, was man als /-​ˈ​tɪk/ statt /-​ˈ​tiːk/ hört. Ich mag’s nicht.

Meines Wissens werden alle Fremdwörter, die auf -ik enden, mit kurzem i gesprochen. Technik, Metrik, Gotik, Systematik, Botanik.

Musik. Oh, schlechtes Beispiel. 😜 Oder sagst du auch /muˈzɪk/?

Warum sollte die Politik da aus dem Rahmen fallen?

Weil’s auf der letzten, fraglichen Silbe betont wird.

Mit langem i hört es sich für mich falsch an.

Für mich mit kurzem.

Warum sollte „Politik“ hinten anders gesprochen werden als „Musik“?

Aber einer meiner Kollegen sagt auch regelmäßig und aus voller Überzeugung "Lidl" mit kurzem i. Da krieg ich immer eine Gänsehaut.

Schlimmer geht immer. Die Berliner S-Bahn lässt ihre Stationsansagen wer-weiß-wo aufnehmen. Und so hört man „Treptower Park“ mit kurzem e: /ˈtʁɛp-/. 🤢 Richtig ist mit langem: /ˈtʁeːp-/.

Nicht, dass die U-Bahn (BVG) besser wäre: „Bernauer Straße“ auf der ersten Silbe betont. 🤢 Richtig ist die Betonung auf dem au.

🖖 Live long and prosper

[klawischnigg]

Hi there,

Warum sollte „Politik“ hinten anders gesprochen werden als „Musik“?

Die Frage ist falsch gestellt. Sprachliche Eigenheiten folgen ja keiner Logik. Es gibt kein "warum", nichtsdestotrotz muß ich persönlich der Aussprache von Martin (den ich daher irgendwo im südlicheren Bereich von Deutschland verorte) "recht" geben, "Politik" mit Betonung auf dem zweiten "i" hört sich für mich (der im österreichischen Südosten am Rande des deutschen Sprachraums lebt) zieeemlich schräg an.😉

Nicht, dass die U-Bahn (BVG) besser wäre: „Bernauer Straße“ auf der ersten Silbe betont. 🤢 Richtig ist die Betonung auf dem au.

Aha, interessant. Ich hab dazu keine eigene Wahrnehmung, ausser halt Dokumetationen im Fernsehen, und auch da hab ich wenn ich mich recht erinnere "Bernauer Strasse" mit Betonung auf der ersten Silbe gehört. (Was nichts daran ändert, daß ich nicht daran zweifle, daß Deine Aussprache in dem Fall sicher die richtige ist)...

[Der Martin]

Hallo,

Warum sollte „Politik“ hinten anders gesprochen werden als „Musik“?

Die Frage ist falsch gestellt. Sprachliche Eigenheiten folgen ja keiner Logik.

richtig - und da haben wir das nächste Beispiel mit kurzem i. 🤭

Es gibt kein "warum", nichtsdestotrotz muß ich persönlich der Aussprache von Martin (den ich daher irgendwo im südlicheren Bereich von Deutschland verorte)

Gut geschätzt - Großraum Stuttgart.

"recht" geben, "Politik" mit Betonung auf dem zweiten "i" hört sich für mich (der im österreichischen Südosten am Rande des deutschen Sprachraums lebt) zieeemlich schräg an.😉

Also die Betonung sehe ich schon auf der letzten Silbe - aber bei kurzer Aussprache. Ganz anders beim Eigenschaftswort "politisch": Da liegt die Betonung auf der Mittelsilbe. Lang oder kurz ausgesprochen, ich glaube, beide Varianten sind etwa gleich stark vertreten.

Aber Gunnars Beispiel mit der Musik ist auch schön. Tatsächlich finde ich die Betonung auf der zweiten (langen!) Silbe richtig. Aber /m'uzɪk/ mit Betonung auf der ersten, kurz ausgesprochenen Silbe hab ich auch schon hin und wieder gehört.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Logik.

richtig - und da haben wir das nächste Beispiel mit kurzem i. 🤭

Du willst noch welche mit langem? Fabrik, Physik, Mathematik.

Gut geschätzt - Großraum Stuttgart.

Also völlig inkompetent, wenn’s um die deutsche Sprache geht. 😝 SCNR.

🖖 Live long and prosper

[Der Martin]

n'Abend,

Logik.

richtig - und da haben wir das nächste Beispiel mit kurzem i. 🤭

Du willst noch welche mit langem? Fabrik, Physik, Mathematik.

die haben bei mir alle ein betontes, aber kurzes i. So als würden sie mit ck am Ende geschrieben.

Gut geschätzt - Großraum Stuttgart.

Also völlig inkompetent, wenn’s um die deutsche Sprache geht. 😝 SCNR.

Mit Ruhrgebiet-Prägung qua Elternhaus. Aber du hast schon recht, vieles hat im Lauf der Jahrzehnte abgefärbt.

Ich erinnere mich jedoch an einen Fall in der Grundschule, wo sogar ich als Dreikäsehoch Gänsehaut bekam. Schreibübungen. Schreibschrift. Zweite oder dritte Klasse. Mein Lehrer hatte unter meine Übungen im Heft geschrieben:

Der h ist schon viel besser geworden.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Fabrik, Physik, Mathematik.

die haben bei mir alle ein betontes, aber kurzes i. So als würden sie mit ck am Ende geschrieben.

Also völlig inkompetent, wenn’s um die deutsche Sprache geht. 😝 SCNR.

Sag ich doch! 😝

Der h ist schon viel besser geworden.

„Weihnachten – nein, das hat keinen G.“ — Emil, Der Telegrafenbeamte

🖖 Live long and prosper

[JürgenB]

Hallo Gunnar,

Du willst noch welche mit langem? Fabrik, Physik, Mathematik.

ich kenne die alle nur mit kurzem i. Und bei Physik sollte ich es wissen 😀.

Gruß
Jürgen

[Gunnar Bittersmann]

@@klawischnigg

Aha, interessant. Ich hab dazu keine eigene Wahrnehmung, ausser halt Dokumetationen im Fernsehen, und auch da hab ich wenn ich mich recht erinnere "Bernauer Strasse" mit Betonung auf der ersten Silbe gehört.

Ugh. Da sollte man eigentlich genügend Ressourcen vermuten, dass sie jemanden fragen könnten, der sich auskennt.

(Was nichts daran ändert, daß ich nicht daran zweifle, daß Deine Aussprache in dem Fall sicher die richtige ist)...

Du tust gut daran, nicht zu zweifeln. Ich bin in Bernau aufgewachsen.

🖖 Live long and prosper

[MudGuard]

Hi,

Aber einer meiner Kollegen sagt auch regelmäßig und aus voller Überzeugung "Lidl" mit kurzem i. Ein bisschen wie "Liddl".

solange er nicht die Kassiererinnen dort als Liddl-Mäuse beschimpft …

cu,
Andreas a/k/a MudGuard

[Rolf B]

wenn hinter fliegen fliegen fliegen fliegen fliegen fliegen nach

Dazu fällt mir ein:

Buffalo buffalo buffalo buffalo buffalo buffalo buffalo buffalo.

(zwei der b möchten lieber ein B sein, aber ansonsten ist der Satz 100% korrekt und voll aus dem Radfahrer-Leben)

Rolf

[Gunnar Bittersmann]

@@Sven

wie kann ich erreichen, dass ein input-Feld nur numerische Eingaben ermöglicht?

Es geht um Postleitzahlen? In manchen Ländern kommen auch Buchstaben in Postleitzahlen vor. (Weshalb das im Englischen auch postal code heißt.)

Du willst gezielt Nutzer von deiner Website ausschließen?

Und auch deutsche Postleitzahlen sind – entgegen ihrer Bezeichnung – keine Zahlen. Eine Eingabe von „01067“ musst du als String entgegennehmen und verabeiten. Als Zahl würde daraus 1067 (oder gar 567?) werden, und das willst du nicht.

Ich habe es mit type="number" versucht, das bewirkt allerdings etwas ganz anderes.

Kommst drauf an, was du mit „nur numerische Eingaben ermöglicht“ meinst. Eingeben kann man in <input type="number"> in Firefox und Safari alles Mögliche, nur abschicken kann man das Formular dann nicht.

Chromium-Browser hingegen nehmen nur Ziffern als Eingaben an. (Und Vorzeichen und evtl. auch Dezimaltrennzeichen.)

---

Und wie kann ich ein Eingabefeld kürzer machen wenn ich die Felder mit

In HTML mit dem size-Attribut.

In CSS mit max-width oder width.

🖖 Live long and prosper

[Sven]

Es geht um Postleitzahlen? In manchen Ländern kommen auch Buchstaben in Postleitzahlen vor.

Es sind nur deutsche Postleitzahlen zulässig

Kommst drauf an, was du mit „nur numerische Eingaben ermöglicht“ meinst.

Eingabe nur von Ziffern. Das habe ich schon öfter erlebt, dass ein anderes Zeichen als 0-9 bei der Eingabe abgelehnt wird und nicht erst beim absenden.

In CSS mit max-width oder width.

Wie kann ich aber diese width-Angabe gezielt für ein oder mehrere Felder des grids machen? Jedesmal eine Klasse definieren für diese Felder?

[Rolf B]

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