HTML 5 - Eingabefeld

[Sophie]

Hallo,

gibt es in HTML 5 ein Eingabefeld wo ich nur im 15 Schritt hochzählen kann?

Als Beispiel:

• 0,15
• 0,30
• 0,45
• 1,00
• 1,15
• usw

[Sophie]

Hallo,

ich habe etwas gefunden

<input type="number" min="0" step="0.15" name="stunden" id="stunden" value="<?php echo htmlspecialchars($stunden);?>" />

allerdings läuft das nicht so wie ich mir es gedacht habe. Bei 0,45 soll er auf 1 umspringen und dann weiter mit 1.15

[Camping_RIDER]

Aloha ;)

<input type="number" min="0" step="0.15" name="stunden" id="stunden" value="<?php echo htmlspecialchars($stunden);?>" />

allerdings läuft das nicht so wie ich mir es gedacht habe. Bei 0,45 soll er auf 1 umspringen und dann weiter mit 1.15

Das liegt daran, dass deine Anforderung ungewöhnlich ist - das step-Attribut tut genau was es soll (nämlich in den genannten Schritten hochzählen). Nicht mehr und nicht weniger. Deinen extra-Sprung musst du dann von Hand einbauen.

Beispielsweise per JavaScript: Auf das change-Event des input-Elements reagieren und falls this.value - Math.trunc(this.value) > 0.45 dann eben this.value = Math.ceil(this.value).

Grüße,

RIDER

[Gunnar Bittersmann]

@@Sophie

<input type="number" min="0" step="0.15" name="stunden" id="stunden" value="<?php echo htmlspecialchars($stunden);?>" />

allerdings läuft das nicht so wie ich mir es gedacht habe. Bei 0,45 soll er auf 1 umspringen und dann weiter mit 1.15

Du willst ja auch gar nicht 0.15 als Schrittweite, sondern 0:15.

Wenn du in Stunden rechnest, also Viertelstunden, also 0.25. Wenn du dem Nutzer nicht zumuten willst, 15 Minuten in ¼ Stunde umzurechnen, willst du eine Eingabe in Stunden: Minuten.

<input type="time" step="900"/> (step ist in Sekunden) – in Browsern, die diesen Eingabetypen unterstützen: Chrome. Firefox und Safari nicht. Edge kann ich gerade nicht testen; VM macht gerade Update. Aber das ist wohl eigentlich für Uhrzeiten gedacht, nicht für Zeitdauern.

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

das funktioniert auch nicht im Google Chrome. Von daher würde ich das ungern nehmen. Und was ist daran schwer zu sagen, ich habe 8h 15min gearbeitet, also tragen ich ein 8,15 und gut ist.

[Gunnar Bittersmann]

@@Sophie

Und was ist daran schwer zu sagen, ich habe 8h 15min gearbeitet, also tragen ich ein 8,15 und gut ist.

Nein, 8,15h sind 8h 9min.

8h 15min sind 8,25h. Oder 8**:**15.

Du versuchst, Dezimalbrüche zu missbrauchen. Das wird früher oder später schiefgehen.

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

das ändert überhaupt nichts an meinem Problem.

[Gunnar Bittersmann]

@@Sophie

das ändert überhaupt nichts an meinem Problem.

Nicht an diesem. Das ändert dein Problem. Als solches.

Du willst ein Zeiteingabefeld. Was es in vielen Browsern so nicht gibt.

Da musst du irgendwas bauen. Aber type="number" step="0.15" dafür zu missbrauchen ist wohl nicht der beste Weg.

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

würde es vielleicht so besser aussehen:

1. <input type="number" min="0" step="1" />
2. Ein Dropdownfeld mit 0,15 0,30 0,45

[Gunnar Bittersmann]

@@Sophie

würde es vielleicht so besser aussehen:

1. <input type="number" min="0" step="1" />
2. Ein Dropdownfeld mit 0,15 0,30 0,45

Eher <input type="number" min="0" step="1" />:<input type="number" min="0" max="45" step="15" />

Per JavaScript wird dafür gesorgt, dass beim Erreichen von 60 im Minutenfeld dieses genullt wird und das Stundenfeld eins hochgezählt wird. Beim Abwärtszählen entsprechend.

Damit man überhaupt 60 erreichen kann, muss man wohl auf max="60" ändern, und damit man abwärts zählen kann, muss man wohl auf min="-15" ändern – aber das mit JavaScript.

Für die Nutzer sollte das Ganze so aussehen wie ein Eingabefeld – und sich auch so anfühlen.

LLAP 🖖

[Gunnar Bittersmann]

@@Sophie

Und was ist daran schwer zu sagen, ich habe 8h 15min gearbeitet, also tragen ich ein 8,15 und gut ist.

Tut es dann nicht ein Texteingabefeld am besten? Vielleicht mit pattern="\d+:\d{2}" für minutengenaue Eingabe bzw. pattern="\d+:(?:00|15|30|45)" für auf Viertelstunden gerundete.

Nachtrag: Wobei ich den Teil ab : optional machen würde, dann könnte man einfach 8 anstatt 8:00 eingeben.

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

<form method="post" action="">
	<input type="text" name="p1" id="p1" value="" pattern="\d+:\d{2}">
	<input type="text" name="p2" id="p2" value="" pattern="\d+:(?:00|15|30|45)">
	<input type="submit" name="abschicken" value="Stunden eintragen" id="stunden">
</form>

Das ist meiner Meinung nach nicht sonderlich User-freundlich. Es wird erst geprüft wenn ich auf Senden klicke, finde ich in der heutigen Zeit schlecht.

Außerdem kann ich im ersten Feld keine 1 oder so eintragen. Er sagt immer ich muss ein Format nehmen welches vorgegen wurde.

Und ist das mit JavaScript nicht viel zu viel Code um eine Eingabe noch zu prüfen, den Wert wieder auf 0 zu setzen usw....

[Gunnar Bittersmann]

@@Sophie

<form method="post" action="">
	<input type="text" name="p1" id="p1" value="" pattern="\d+:\d{2}">
	<input type="text" name="p2" id="p2" value="" pattern="\d+:(?:00|15|30|45)">
	<input type="submit" name="abschicken" value="Stunden eintragen" id="stunden">
</form>

Warum hast du da 2 Eingabefelder eingebaut?

Und BTW, warum nimmst du input für einen Button?

Das ist meiner Meinung nach nicht sonderlich User-freundlich. Es wird erst geprüft wenn ich auf Senden klicke, finde ich in der heutigen Zeit schlecht.

Du kannst mit JavaScript prüfen wann du willst.

Außerdem kann ich im ersten Feld keine 1 oder so eintragen. Er sagt immer ich muss ein Format nehmen welches vorgegen wurde.

Du hattest meinen Nachtrag gelesen?

Und ist das mit JavaScript nicht viel zu viel Code um eine Eingabe noch zu prüfen, den Wert wieder auf 0 zu setzen usw....

Die Frage ist, ob so ein Eingabefeld mit den winzigen Pfeilen von Nutzern angenommen wird. Es wird sich kaum jemand von 0:00 bis 8:15 durchclicken wollen.

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

<form method="post" action="">
	<input type="text" name="p2" id="p2" value="" pattern="\d+,(?:00|15|30|45)">
	<button name="abschicken">Abschicken</button>
</form>

Ich finde die Lösung einfach nicht User-freundlich obwohl du ständig davon redest dass man es dem User so einfach wie möglich machen muss.

Hier muss ich erst eine 5 dann ein , und dann noch ein 15 oder eben wenn es nach deinem Beispiel geht muss man erst eine 5 dann ein : und dann wieder eine Zahl eingeben. Das ist alles umständlich? Wenn ich eine 25 eingebe, dann auf abschicken klicke, dann kommt der Hinweis und der User muss den Eintrag verbessern. Außerdem ist doch so ein Pfeil viel schöner.

[Gunnar Bittersmann]

@@Sophie

Hallo @Gunnar Bittersmann

Hallo Sophie, könntest du das @ bitte weglassen? Ich bekomme auch so mit, wenn du mir antwortest; ohne @ mit der richtigen Meldung, jemand hat mir geantwortet; bei @ mit der Meldung, jemand hat mich erwähnt.

<form method="post" action="">
	<input type="text" name="p2" id="p2" value="" pattern="\d+,(?:00|15|30|45)">
	<button name="abschicken">Abschicken</button>
</form>

Ich finde die Lösung einfach nicht User-freundlich obwohl du ständig davon redest dass man es dem User so einfach wie möglich machen muss.

Da fehlt ja auch noch die Beschriftung fürs Eingabefeld.

Hier muss ich erst eine 5 dann ein , und dann noch ein 15 oder eben wenn es nach deinem Beispiel geht muss man erst eine 5 dann ein : und dann wieder eine Zahl eingeben. Das ist alles umständlich? Wenn ich eine 25 eingebe, dann auf abschicken klicke, dann kommt der Hinweis und der User muss den Eintrag verbessern.

Den Hinweis, dass nur Eingabe auf Viertelstunden genau möglich sind, solltest du schon igendwo unterbringen. Am besten vielleich auch mit ins label-Element.

Außerdem ist doch so ein Pfeil viel schöner.

Du denkst, dass es für den Nutzer schöner wäre, 33 Mal auf so einen Pfeil zu clicken anstatt einfach 8:15 einzutippen?

LLAP 🖖

[Sophie]

Hallo Gunnar Bittersmann,

wie kommst du auf 33mal klicken?

[Gunnar Bittersmann]

@@Sophie

wie kommst du auf 33mal klicken?

0:00 + 33 × 0:15 = 8:15

LLAP 🖖

[Tabellenkalk]

Hallo,

33 ×

das zählt nicht von selbst weiter hoch, wenn man den Knopp gedrückt hält?

Gruß
Kalk

[Sophie]

Hallo,

<label for="Stunden">Anzahl Stunden</label>
<input type="text" 
       name="Stunden" 
       id="Stunden" 
       value="<?php echo htmlspecialchars($Stunden);?>" 
       required 
       pattern="\d+,(?:15|30|45)">

Ich habe mich jetzt für diese Version entschieden. Allerdings finde ich eines nervig, wenn ich nur eine Stunde gearbeitet habe, muss ich dennoch 1,00 eintragen. Sonst lässt er es nicht zu. Ist es irgendwie möglich, zu sagen, dass wenn kein Komma kommt, dass dann auch ganze Zahlen zugelassen sind, ohne die ,00 eintragen zu müssen?

[Gunnar Bittersmann]

@@Sophie

Ist es irgendwie möglich, zu sagen, dass wenn kein Komma kommt, dass dann auch ganze Zahlen zugelassen sind, ohne die ,00 eintragen zu müssen?

Ja, klar: Du machst alles ab dem Komma optional: \d+(?:,(?:15|30|45))?

LLAP 🖖

[Sophie]

Hallo Gunnar Bittersmann,

vielen lieben Dank für deine schnelle Hilfe. Hat wunderbar funktioniert.

[Gunnar Bittersmann]

@@Sophie

vielen lieben Dank für deine schnelle Hilfe. Hat wunderbar funktioniert.

Gern geschehen. Aber da waren wir doch schon mal.

Äh, und Moment mal: wieso Komma? Es handelt sich doch nicht um Dezimalzahlen. Da waren wir auch schon mal.

Da sollte kein Komma zwischen Stunden und Minuten stehen, sondern ein Doppelpunkt. Zur Not auch ein Punkt.

Und die Angabe der Minuten solltest du auch für volle Stunden zulassen: \d+(?:[:.](?:00|15|30|45))?

LLAP 🖖

[dedlfix]

Tach!

Da sollte kein Komma zwischen Stunden und Minuten stehen, sondern ein Doppelpunkt. Zur Not auch ein Punkt.

Formal richtig, aber nutzerfreundlicher ist das Komma. Das lässt sich deutlich leichter eingeben als der Doppelpunkt, besonders wenn man ein NumPad hat.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Da sollte kein Komma zwischen Stunden und Minuten stehen, sondern ein Doppelpunkt. Zur Not auch ein Punkt.

Formal richtig, aber nutzerfreundlicher ist das Komma. Das lässt sich deutlich leichter eingeben als der Doppelpunkt, besonders wenn man ein NumPad hat.

Also Komma zusätzlich zu Doppelpunkt und Punkt zulassen. Und wenn’s hier um leichte Eingabe geht, kann man auch noch Leerzeichen und Bindestrich zulassen: \d+(?:[:., -](?:00|15|30|45))?

LLAP 🖖

[Sophie]

Hallo Gunnar Bittersmann,

\d+(?:[:., -](?:00|15|30|45))?

das ist natürlich auch eine Idee nicht nur das , sondern auch den : und den - zuzulassen. Danke für das Beispiel .

[MudGuard]

Hi,

Da sollte kein Komma zwischen Stunden und Minuten stehen, sondern ein Doppelpunkt. Zur Not auch ein Punkt.

Formal richtig, aber nutzerfreundlicher ist das Komma. Das lässt sich deutlich leichter eingeben als der Doppelpunkt, besonders wenn man ein NumPad hat.

Den Doppelpunkt nicht zuzulassen, ist aber auch nicht nutzerfreundlich.

Also [,.:] statt ,

Dann sind die wichtigsten Fälle abgedeckt. Evtl. auch noch ein Leerzeichen mit rein in die Klammer.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Dann sind die wichtigsten Fälle abgedeckt.

h würde mir noch einfallen: 8h15.

Evtl. auch noch ein Leerzeichen mit rein in die Klammer.

Erster!

LLAP 🖖

[Sophie]

Hallo dedlfix,

ganz genau. Und da ich viel mit Excel arbeite bin ich es einfach gewohnt ein , zu nutzen.

[Sophie]

Hallo Gunnar Bittersmann,

die Kommas sind richtig, wenn sie auch nicht richtig sind. Aber ich bin es von Excel gewohnt dass ich auch bei den Stunden einfach ein , eintragen kann. Ich lass diese mit PHP in meinem Fall ändern.

[Robert B.]

Hallo Sophie,

und 1,20 Stunden sind dann was − 1:20 oder 1:12?

Viele Grüße
Robert

[Matthias Apsel]

Hallo Robert B.,

und 1,20 Stunden sind dann was − 1:20 oder 1:12?

Grundsätzlich stellt es kein Problem dar, wenn klar ist, was es bedeutet. Zumindest ein Großer(?) der Branche stellt sowohl Zeitpunkte als auch Zeitdauern im Format h.min dar.

Bis demnächst
Matthias

[Sophie]

Hallo Robert,

da ich nur mit 0,25 | 0,50 | 0,75 ist die Verwechslung eigentlich ausgeschlossen. Wenn man dieses Jahrelang so gewohnt ist, dann ist dieses kein Problem.

Zu deiner Frage, 1,20 wären dann eine Stunde und 20 Minuten.

@Matthias Apsel warum habe ich plötzlich solche Linien in meinem Beitrag? 😱

[Auge]

Hallo

… mit 0,25 | 0,50 | 0,75 ist …

@Matthias Apsel warum habe ich plötzlich solche Linien in meinem Beitrag? 😱

Weil du die Aufzählung mit dem Pipe-Zeichen realisiert hast, welches in der Markdown-Syntax, die hier zur Formatierung benutzt wird, Tabellenspalten voneinander trennt. Wenn du dem Syntaxzeichen einen Backslash voranstellst (\|), wird es nicht interpretiert (|).

Tschö, Auge

[Camping_RIDER]

Aloha ;)

Du willst ja auch gar nicht 0.15 als Schrittweite, sondern 0:15.

Das hat dir die Glaskugel gesagt! Im Ernst, ich hoffe das Eingabefeld ist besser beschriftet als die Frage.

Ich hab mich nur gewundert was dieser seltsame Schritt von 0,45 auf 1 soll. Dass 0,45 eine Darstellung von 45 Minuten sein soll hätte ich nie gefolgert.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

Das hat dir die Glaskugel gesagt! […] Dass 0,45 eine Darstellung von 45 Minuten sein soll hätte ich nie gefolgert.

Wie hier im Forum immer wieder betont wird, mangelt es mir nicht an Einfühlungsvermögen. 😆

LLAP 🖖

[Tabellenkalk]

Hallo,

hatten wir doch erst kürzlich.

Gruß
Kalk

[Sophie]

Hallo @Tabellenkalk

das ist aber nicht das, was ich benötige?

[Matthias Apsel]

Hallo Sophie,

Vielleicht wären in deinem Fall zwei Eingabefelder, eins für den Beginn der Arbeitszeit und eins für das Ende, die nutzerfreundlichere Variante.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Vielleicht wären in deinem Fall zwei Eingabefelder, eins für den Beginn der Arbeitszeit und eins für das Ende, die nutzerfreundlichere Variante.

Welche man auf Knopfdruck mit der aktuellen Uhrzeit befüllen kann.

LLAP 🖖

[Linuchs]

Vielleicht wären in deinem Fall zwei Eingabefelder, eins für den Beginn der Arbeitszeit und eins für das Ende, die nutzerfreundlichere Variante.

War auch meine erste Idee. Aber dann musst du noch Pausen erfassen, den Überlauf über Mitternacht und wer weiss, was im Schaltjahr passiert, wenn du von Silvester bis zum 2. Januar arbeitest. In irgendeinem Bereitschaftsdienst zum Beispiel.

Linuchs