Input für mm:ss semantisch richtig

[olli]

Hallo zusammen, Ich brauche für eine Timerfunktion ein Input Feld, welches dem Schema mm:ss entspricht. Höchstdauer sind 10:00 Minuten. Input type=time mit maxwerten funktioniert leider nicht, android Chrome z.B. gibt den kompletten Timepicker zur Auswahl. Nun bleibt mir die Möglichkeit ein input=Text mit pattern zu nutzen oder zwei getrennte input=number Felder. Oder gibt es einen anderen Ansatz und wenn nicht, welchen würdet Ihr empfehlen?

Dank und Gruß Olli

[Nico R.]

Hallo Olli,

ich nutze für mein Projekt konsequent getrennte Felder. Ein zusammenhängendes Feld hatte sowohl bei der Verarbeitung als auch bei der Eingabe nur Nachteile.

In meinem Fall nutze ich aber keine inputs, sondern selects für hh und mm. Das macht die Validierung einfacher, und auf Mobilgeräten bekommen die Nutzer außerdem diese schöne Casino-Automaten-Auswahl angezeigt, die finde ich immer ganz nett :-)

Schöne Grüße Nico

[Gunnar Bittersmann]

@@Nico R.

ich nutze für mein Projekt konsequent getrennte Felder.

Bitte nicht! Es ist eine Zeitangabe, die eingegeben werden soll. Eine Angabe – ein Feld.

Ein zusammenhängendes Feld hatte sowohl bei der Verarbeitung als auch bei der Eingabe nur Nachteile.

Nein. Bei der Eingabe hat ein Feld den Vorteil, dass man das schneller ausfüllen kann als zwei Felder, wo man erst noch von einem Feld zum anderen wechseln muss.

Die Verarbeitung ist dein Problem. Und dein Problem solltest du nicht auf die Nutzer abwälzen.

In meinem Fall nutze ich aber keine inputs, sondern selects für hh und mm.

Noch schlimmer! In der Zeit, in der ich bis 23 runtergescrollt bin, habe ich siebenmal „23“ eingegeben.

Das macht die Validierung einfacher

Wie gesagt: dein Problem, welches du nicht auf die Nutzer abwälzen solltest.

und auf Mobilgeräten bekommen die Nutzer außerdem diese schöne Casino-Automaten-Auswahl angezeigt, die finde ich immer ganz nett :-)

Was du nett findest, ist unbedeutend. Der Wurm muss dem Fisch schmecken, nicht dem Angler.

🖖 Живіть довго і процвітайте

[Nico R.]

Hallo Gunnar,

Bitte nicht! Es ist eine Zeitangabe, die eingegeben werden soll. Eine Angabe – ein Feld.

Joaaa, kann man durchaus so sehen. Man könnte aber auch sagen, eines sind die Stunden und eines die Minuten. Bei Digitaluhren in den 80ern hat man z.B. auch per Knopf zwischen hh- und mm-select gewechselt 😀

Nein. Bei der Eingabe hat ein Feld den Vorteil, dass man das schneller ausfüllen kann als zwei Felder, wo man erst noch von einem Feld zum anderen wechseln muss.

Grundsätzlich hast du sicher recht. Bei mir ist es aber eine Anwendung für einen festgelegten Benutzerkreis, die rein zur Nutzung auf dem Mobilgerät dient. Daher ist das Wechseln der Felder hier kein großes Hindernis.

Noch schlimmer! In der Zeit, in der ich bis 23 runtergescrollt bin, habe ich siebenmal „23“ eingegeben.

Eine kleine nicht repräsentative "Umfrage" unter Mobilgerätnutzern in meinem Bekanntenkreis hatte ergeben, dass diese in der Mehrzahl die Zeit lieber scrollen als tippen.

Ich wollte gerade schreiben, dass sich mit <input type="time"> beide Vorlieben vereinen ließen. Aber Zahleingabe in Kombination mit Scrollmöglichkeit funktioniert unter Safari nur unter der veralteten Version iOS 14.5.1, im aktuellen Safari kann man mit type="time" nur noch scrollen.

Wie gesagt: dein Problem, welches du nicht auf die Nutzer abwälzen solltest.

Das ist natürlich richtig.

Was du nett findest, ist unbedeutend. Der Wurm muss dem Fisch schmecken, nicht dem Angler.

Naja, siehe oben. Apple scheint auch zu meinen, dass die Scrollvariante lieber genutzt wird. Wobei ich mir die Sichtweise von Apple nicht zu eigen machen möchte. Grundsätzlich fände ich wie gesagt eine Kombination beider Möglichkeiten am besten. So wie es in normalen Browsern (also nicht Safari mobile) bei einem normalen select-Feld der Fall ist.

Schöne Grüße

Nico

[Auge]

Hallo

Ich brauche für eine Timerfunktion ein Input Feld, welches dem Schema mm:ss entspricht. Höchstdauer sind 10:00 Minuten. Input type=time mit maxwerten funktioniert leider nicht, android Chrome z.B. gibt den kompletten Timepicker zur Auswahl.

Prinzipiell funtioniert <input type="time"> in allen gängigen Browsern. Einschränkungen gibt es in ein paar Browsern laut caniuse.com nur bei einigen Subtypen und im Safari bei Attributen wie dem für dich relevanten max. Laut caniuse.com ist die Unterstützung im Chrome (Desktop wie Android) vollständig.

Mit …

<form method="get">
	<label for="timespan">Zeitspanne</label>
	<input id="timespan" type="time" max="10:00">
	<button>Absenden</button>
</form>

… Erhalte ich im Firefox und Chrome unter Windows (also Desktop-System) sowohl ein Feld mit reiner Zeiteingabe und auch mit dem anmeckern bei Eingabe eines größeren Werts als 10:00.

Einen Test mit einem Chrome unter Android, bei dem du ein Fehlverhalten siehst, kann ich aktuell in Ermangelung eines geeigneten Geräts leider nicht anbieten.

Um weiter ins Detail gehen zu können, musst du schon den relevanten Quellcode herzeigen (bei Bedarf synonymisiert). Am besten bei einem Code-Hosting-Dienst oder, wenn es ein überschaubares Stück Code ist, direkt in einem Posting.

Tschö, Auge

[Nico R.]

Das funktioniert in der Tat sehr gut. Auf einem aktuellen iPhone erscheint auch meine geliebte "Casino-Automaten-Auswahl" - sogar in kombinierter Form.

Kleine Einschränkung: Auf meinem eigenen nicht ganz taufrischen iPhone mit dem eineinhalb Jahre alten iOS 14.5.1 funktioniert der Picker noch nicht. Das war vermutlich auch der Grund, weshalb ich mich für die getrennten Felder entschieden hatte.

Gruß Nico

[Auge]

Hallo

Kleine Einschränkung: Auf meinem eigenen nicht ganz taufrischen iPhone mit dem eineinhalb Jahre alten iOS 14.5.1 funktioniert der Picker noch nicht.

Für welchen Typ, auf dem sich iOS 16 nicht installieren lässt, ist denn bei iOS 14.5.1 schluss? Ich habe ein SE (erste Generation, vorwiegend iPhone-6-Technik verbaut) und bei mir läuft iOS 15.7.5. Davon abgesehen sind die Einschränkungen für iOS-Safaris laut caniuse.com auf allen iOS-Versionen seit iOS 5 die selben ^[1], was an sich schon ein Armutszeugnis ist. Also warum geht im Safari eines neuen iOS-Geräts etwas, was auf einem älteren Gerät nicht geht, obwohl der gleiche Browser in unterschiedlichen Versionen die gleichen Dinge nicht kann?

Die Zeiten, als Safari bei der Umsetzung von Features ganz vorne war, ist wohl schon lange vorbei.

Tschö, Auge

---

1. Partial support in iOS Safari refers to not supporting the week input type, nor the min, max or step attributes ↩︎

[Nico R.]

Kommando zurück. Es funktioniert auch unter iOS 14.5.1, auch mit max-Attribut. Ich Dödel hab einfach nur die Anzeige auf dem iPhone nicht verstanden, die sah etwas ungewohnt aus. Unter 15.5. ist das Ganze schöner gelöst. Fazit: <input type="time"> kann man mittlerweile anscheinend ohne Bedenken nutzen, bzw. sollte es sogar.

Für welchen Typ, auf dem sich iOS 16 nicht installieren lässt, ist denn bei iOS 14.5.1 schluss? Ich habe ein SE (erste Generation, vorwiegend iPhone-6-Technik verbaut) und bei mir läuft iOS 15.7.5.

Das ist allein meiner Update-Faulheit geschuldet. Für die werde ich aus dem Freundes- und Familienkreis regelmäßig gerügt, da mir die aktuellsten Emojis vorenthalten bleiben.

Die Zeiten, als Safari bei der Umsetzung von Features ganz vorne war, ist wohl schon lange vorbei.

In der Tat ein leidiges Thema. Die sind bei einigen Sachen wirklich stur. Oder waren es zumindest. Mir fällt leider nicht mehr ein, worüber ich mich damals geärgert hatte.

Gruß Nico

[Auge]

Hallo

Kommando zurück. Es funktioniert auch unter iOS 14.5.1, auch mit max-Attribut. Ich Dödel hab einfach nur die Anzeige auf dem iPhone nicht verstanden, die sah etwas ungewohnt aus. Unter 15.5. ist das Ganze schöner gelöst. Fazit: <input type="time"> kann man mittlerweile anscheinend ohne Bedenken nutzen, bzw. sollte es sogar.

😀👍

Für welchen Typ, auf dem sich iOS 16 nicht installieren lässt, ist denn bei iOS 14.5.1 schluss?

Das ist allein meiner Update-Faulheit geschuldet. Für die werde ich aus dem Freundes- und Familienkreis regelmäßig gerügt, da mir die aktuellsten Emojis vorenthalten bleiben.

Na das ist ja mal ein Grund für Updates. 😆

Tschö, Auge

[Robert B.]

Moin Olli,

Ich brauche für eine Timerfunktion ein Input Feld, welches dem Schema mm:ss entspricht. Höchstdauer sind 10:00 Minuten. Input type=time mit maxwerten funktioniert leider nicht, android Chrome z.B. gibt den kompletten Timepicker zur Auswahl.

input type="time" stellt die Zeit auch nur in Stunden und Minuten zur Verfügung:

<form>
<input type="time" name="t">
<button type="button" id="b">Darstellen</button>
</form>
<ul>
</ul>
<script>
document.getElementById('b').addEventListener('click', function() {
	let li = document.createElement('li');
	const t = this.form.t;
	li.textContent = `${t.value} / ${t.valueAsNumber}`;
	
	document.getElementsByTagName('ul')[0].appendChild(li);
});
</script>

Auf meinem Rechner sieht das so aus:

Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in hh:mm sind. Der value lässt sich zwar entsprechend weiter verarbeiten, kann aber „modulo 12“ sein. valueAsNumber zeigt direkt, dass die Werte um den Faktor 60 zu groß sind.

Nun bleibt mir die Möglichkeit ein input=Text mit pattern zu nutzen oder zwei getrennte input=number Felder.

input mit pattern müsstest du parsen, zwei Inputfelder kannst du entsprechend mit min und max versehen und musst dann die passende Zeitdauer berechnen. Das ist vermutlich Geschmackssache.

Viele Grüße
Robert

[Raketenwilli]

<form>
<input type="time" name="t">
<button type="button" id="b">Darstellen</button>
</form>
<ul>
</ul>
<script>
document.getElementById('b').addEventListener('click', function() {
	let li = document.createElement('li');
	const t = this.form.t;
	li.textContent = `${t.value} / ${t.valueAsNumber}`;
	
	document.getElementsByTagName('ul')[0].appendChild(li);
});
</script>

Auf meinem Rechner sieht das so aus:

Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in hh:mm sind.

Das Verhalten ändert sich dramatisch, wenn man man den Step setzt:

<input type="time" name="t" step=1 min=0 max="00:10:00" value="00:00:00">

Die Ausgaben sind offensichtlich in Sekunden*1000.

Min, Max:

Allerdings habe ich dann sowohl in Chromium als auch im Firefox (beide unter Ubuntu) in (Deinem) Javascript keine Reaktion auf min oder max - Ein Test mit einem zusätzlichen Button (type="submit") ergab: der Wert wird dann beim Senden des Formulars (submit) überprüft.

Abhilfe schafft das Ausühren des Javascriptes "onsubmit".

Meine Meinung zum empfohlenen Vorgehen:

In Summa würde ich bei zwei Inputs für Integers bleiben, Doppelpunkt dazwischen notieren und "onkeypress" den Value des Minuten-Inputs prüfen, den Doppelpunkt ggf. löschen und das Feld wechseln wenn der Doppelpunkt eingegeben wurde oder zwei Ziffern drin stehen. Minimum und Maximum in Javascript und/oder serverseitig prüfen.

[Raketenwilli]

Mist. Das war ungenau:

und das Feld wechseln

Meint: Den Fokus auf den Sekunden-Input setzen.

[Rolf B]

Hallo Raketenwilli,

TL;DR: input type="time" ist nur eingeschränkt brauchbar.

Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in hh:mm sind.

Ob AM/PM erscheint, hängt vom locale des Betriebssystems ab. Sagt MDN. D.h. wenn man von seinem Brauser ein AM/PM gezeigt bekommt und das ändern will, sollte man seinem Betriebssystem sagen, dass man gerne ein 24h Zeitformat möchte.

Das Verhalten ändert sich dramatisch, wenn man man den Step setzt:

Das Control ist so definiert, dass es Sekunden zeigt, wenn es eine Zeitvorgabe mit Sekunden bekommt. Sagt MDN. Mein verChrometes Experiment sagt: Die Sekundenagabe darf nicht 0 sein. Oder man muss eine Step-Angabe machen, die nicht durch 60 teilbar ist.

Step wirkt - bei mir - nur beim Pfeil-Auf/Ab Tippen im zugeklappten Picker. Im Picker kann ich alles auswählen und es findet sich auch im Value wieder. Aber wenn man das dann aus einem Form submitten will, kommt die Validation API hoch und mault rum.

Wenn Dir .valueAsNumber nicht schmeckt, dann nimm .valueAsDate. Das liefert Dir ein Date-Objekt mit getMinutes() und getSeconds().

Eine reine mm:ss Ansicht wird von HTML nicht nativ unterstützt, wenn ich das richtig sehe.

Rolf