Sophie: HTML 5 - Eingabefeld

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

akzeptierte Antworten

  1. 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

    1. 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

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    2. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. 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.

        1. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. Hallo @Gunnar Bittersmann

            das ändert überhaupt nichts an meinem Problem.

            1. @@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 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. 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
                1. @@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 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. 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....

            1. @@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 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. 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.

                1. @@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 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. Hallo Gunnar Bittersmann,

                    wie kommst du auf 33mal klicken?

                    1. @@Sophie

                      wie kommst du auf 33mal klicken?

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

                      LLAP 🖖

                      --
                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                      1. Hallo,

                        33 ×

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

                        Gruß
                        Kalk

                  2. 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?

                    1. @@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 🖖

                      --
                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                      1. Hallo Gunnar Bittersmann,

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

                        1. @@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 🖖

                          --
                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                          1. 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.

                            1. @@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 🖖

                              --
                              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                              1. 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 .

                            2. 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

                              1. @@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 🖖

                                --
                                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                            3. Hallo dedlfix,

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

                          2. 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.

                            1. Hallo Sophie,

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

                              Viele Grüße
                              Robert

                              1. 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

                                --
                                Rosen sind rot.
                              2. 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? 😱

                                1. 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

                                  --
                                  Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                                  Toller Dampf voraus von Terry Pratchett
      2. 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

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        1. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Hallo,

    hatten wir doch erst kürzlich.

    Gruß
    Kalk

    1. Hallo @Tabellenkalk

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

  3. 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

    --
    Rosen sind rot.
    1. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. 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