nicht angemeldet claus ginsel
Samuel fiedler
MudGuard
claus ginsel
Rolf B
claus ginsel
Rolf B
claus ginsel
Rolf B
claus ginsel
Linuchs
Rolf B
Moin
Ich möchte die Eingabe in ein HTML-Formularfeld auf bestimmte Zeichen beschränken. Andere Zeichen sollen nicht übernommen werden.
Clientseitig mit Javascript in Verbindung mit keydown klappt das auch an einem Gerät mit Tipp-Tastatur:
var re = /[^0-9a-zA-Z]{1}$/;
document.getElementById('input').addEventListener ("keydown", function (event) {
if(re.test(event.key)==true){event.preventDefault();}
});
Nun versuche ich das gleiche auch für Touch-Geräte. Mögliche Events scheinen mir touchstart und / oder touchend zu sein. Diesen / diese würde ich zusätzlich zum keydown Event für das gleiche Element anlegen wollen.
Allerdings finde ich zu diesen Touchevents kein vergleichbares Attribut "key" wie bei keydown, das mir das Zeichen zurückgibt. Oder verbirgt sich das vielleicht hinter "targetTouches" bzw "touches"?
Gruß Claus
Rolf B
Hallo claus ginsel!
Ich möchte die Eingabe in ein HTML-Formularfeld auf bestimmte Zeichen beschränken. Andere Zeichen sollen nicht übernommen werden.
Da wäre jetzt meine erste Frage, wozu du das möchtest. Falls du z.B. verhindern möchtest, dass HTML-Code eingegeben wird (oder etwas anderes, was nicht passieren soll), dann solltest du es nicht nur clientseitig validieren, sondern auch serverseitig! (clientseitig kann man ja alles manipulieren!).
Ggf. solltest du aber auf der SelfHTML-Element-Referenz nach dem richtigen Attributinhalt von dem type-Attribut schauen.
Au revoir,
Samuel Fiedler
Hallo Samuel
das ist Teil der Input-Validierung. Das passiert auch server-seitig.
in HTML verwende ich das pattern-Attribut. das wird allerdings bei einem textarea ja nicht unterstützt.
Gruß Claus
Hi,
Nun versuche ich das gleiche auch für Touch-Geräte. Mögliche Events scheinen mir touchstart und / oder touchend zu sein.
Aber auf einem Touch-Gerät wird doch bei einem Input-Feld beim Touch eine Tastatur eingeblendet.
Und die Touches für die Buchstaben erfolgen dann auf der Tastatur, nicht auf dem Input-Feld.
Das Input-Feld sollte m.E. dann genauso key-Events bekommen wie bei einem Gerät mit echter Tastatur.
cu,
Andreas a/k/a MudGuard
Hallo Andreas,
leider nicht. keydown wir zumindest bei meinem Samsung nicht ausgeführt.
Gruß Claus
Hallo claus,
keydown wir zumindest bei meinem Samsung nicht ausgeführt.
Bäh. Dann schau mal, was mit keypress ist. Wenn das auch nicht kommt, würde es mich sehr wundern.
Im Notfall musst Du auf das input-Event zurückgreifen und nach jeder Inhaltsänderung die ungültigen Zeichen wieder rausschmeißen, das wäre aber nur eine Notlösung.
Rolf
Hallo Rolf
keypress ist doch deprecated, hab ich deshalb auch nicht weiter verfolgt.
Verwendest Du das weiterhin?
Gruß Claus
Hallo claus,
Ups. Das war mir noch gar nicht aufgefallen. Peinlich...
Die Spec empfiehlt das beforeinput-Event als Alternative. Das ist etwas unhandlicher, aber das inputType Attribut sagt Dir, ob eingefügt, gepastet oder gelöcht wird, und im data-Attribut stehen alle einzufügenden Zeichen. Du weißt nur nicht, wohin sie gelangen sollen.
Vielleicht nützt es Dir ja was.
Rolf
Moin Rolf
ich nehm beforeinput mit data, geht auch auf meinem Handy 👍
Du weißt nur nicht, wohin sie gelangen sollen.
Was meinst Du damit?
Sag mal, kann man das dem User zumuten, einfach bei der Eingabe Zeichen zu unterschlagen oder führt das eher zu Verunsicherung und Verwirrung? Denn der User weiß ja nix von dem Hintergrund.
Gruß Claus
Hallo claus,
kann man das dem User zumuten, einfach bei der Eingabe Zeichen zu unterschlagen
Meiner Meinung nach hängt das vom Kontext und der ordentlichen Beschriftung des Eingabefeldes ab. Wenn die Beschriftung eindeutig klar macht, dass nur Ziffern zulässig sind, ist es kein Problem.
Eine Beschriftung "Personalausweisnummer" wird ebenfalls keine Verwirrung auslösen, wenn Du nur die Zeichen zulässt, die in einer Personalausweisnummer zulässig sind (sofern Du denn die für das jeweilige Land richtigen Regeln anwendest).
Wenn da steht "Name" und du lässt nur die klassischen ASCII-Buchstaben zu, wird es eher zur Verwirrung führen.
Wenn Du beliebige Eingaben zulässt und falsche Zeichen darin einfach nur mit "Unzulässige Eingabe" zurückweist, ist die Verwirrung aber noch größer. Wie vorhin beim Nachbarn erwähnt: UI Design ist eher nichts für Entwickler. Die denken zu technisch.
Rolf
Danke für Deine Meinung, mein Bauchgefühl stimmt Dir da voll zu.
Gruß Claus
Hallo Rolf,
Eine Beschriftung "Personalausweisnummer" wird ebenfalls keine Verwirrung auslösen
Ich denke dabei an den Klassiker „Postleitzahl“. In D ist es nicht üblich, Zahlen eine Null voranzustellen, und ausgerechnet in D wird das gemacht (das Problem hatten wir vor ein paar Tagen). Im Ausland kann der „Postcode“ auch Buchstaben (und Sonderzeichen?) enthalten.
Die Engstirnigkeit des Programmierers könnte bei zu engen Prüfungen zum Problem werden.
Gruß, Linuchs
Hallo Linuchs,
stimmt. Weder Postleitzahl noch Personalausweisnummer sind Zahlen; beides sind Codes und damit letztlich Strings. Die Begrifflichkeiten sind historisch geprägt und heute falsch.
„Herr Ober, zahlen bitte!“ - „Kommt Sofort“
Rolf
Hi,
stimmt. Weder Postleitzahl noch Personalausweisnummer sind Zahlen; beides sind Codes und damit letztlich Strings.
Gleiches gilt für Hausnummern (8a, 25 1/2, 9-11, 11/2, 60/D, 63 IV hab ich schon gesehen ...)
cu,
Andreas a/k/a MudGuard
Hallo claus,
wenn Du ein Gerät mit Touch-Bedienung hast, sollten die Zeicheneingaben der Touch-Tastatur ebenfalls key... Events auslösen.
Einfache Tipp-Aktionen auf dem Bildschirm auf clickbare Elemente sollten Mausevents auslösen, bzw. Pointerevents.
Explizites Handling von Touchevents brauchst Du nur, wenn Dir die Emulation von Tastatur- und Maus/Pointer-Ereignissen nicht ausreicht.
Beachte aber, dass ein Texteingabefeld auch andere Möglichkeiten der Dateneingabe kennt. Ein Handy könnte auf OK GOOGLE (oder ähnliche Sprachbefehle) reagieren, oder jemand fügt Text ein. Das kann auch am Desktop durch Kopieren+Einfügen passieren - Einfügen lässt sich auf unterschiedlichste Art auslösen (Strg+V, Kontextmenü öffnen mit rechter Maustaste oder rechter Windows-Taste, Sprachbefehl, beim Touchgerät langes Halten des Fingers auf einer Stelle), das kannst Du gar nicht alles abfangen. D.h. du müsstest das input Event abfangen und nach jeder Änderung des Feldinhaltes die ungültigen Zeichen rauswerfen - was aber auch nicht sooo dolle ist.
Besser ist das pattern-Attribut des Eingabefeldes, oder eine Deklaration des Eingabefeldes als numerisch wenn Du nur Zahlen angeben willst. Das kannst Du dann zusammen mit CSS und der :valid-Pseudoklasse zum Darstellen einer fehlerhaften Eingabe verwenden, und ein SUBMIT gelingt auch nicht, wenn die Felder auf dem Form nicht alle ihre Prüfregeln bestehen.
Für einfaches Blockieren von von Tastatureingaben, egal auf welcher Tastatur, ist das keypress-Event hinreichend. Einfügen von kopiertem Text musst Du anders abfangen. Du kannt z.B. das paste-Event verwenden, das im Selfwiki bisher nur rudimentär dokumentiert ist, schau mal bei Mozilla.
Rolf
Hallo Rolf
ich hab gerade mal mit keypress probiert, mein Samsung-Browser und die Google-App reagieren nicht da drauf.
Gruß Claus