Alfredo: Wie wie erstellt man oder wie nennt sich folgendes gesuchtes html Element?

Wie kann ich bei folgenden html Element das Eingabefeld ausblenden?

Ich kann zwar das Eingabefeld verkleinern indem ich es size=1 einstelle, es wird jedoch nicht ausgeblendet wenn ich es size=0 einstelle oder size=-1

Wie macht man das oder gibt es ein solches Feld mit zwei Pfeilen auch ohne Eingabefeld?

Mit meiner bisherigen Suche bin ich bisher nicht erfolgreich gewesen, da mir nicht bekannt ist wie sich so etwas nennt was ich suche.

Die Pfeiltasten die ich suche, sollen rundherum ohne irgend welchen Überreste von z.B. einem Formularfeld sein, damit ich das html-Element mit den Pfeiltasten auch wahlweise ohne Abstand links oder recht ohne Abstand zum Seitenrand der html Seite platzieren kann.

akzeptierte Antworten

  1. Hallo Alfredo,

    ob HTML das, was Du suchst, als natives Control anbietet, weiß ich auch nicht. Du musst aber auch berücksichtigen, dass sich die Browser über die diversen Plattformen hinweg sehr unterschiedlich verhalten können, d.h. wenn Du irgendwas im Browser X hinbekommen hast, kann es im Browser Y – vor allem auf Mobilgeräten – ganz anders aussehen.

    Das bringt mich zu Alternativüberlegungen. Wenn Du den Zahlenwert nicht haben willst - wie soll der Anwender dann wissen, welcher Wert eingestellt ist? D.h. Du brauchst eine andere Form der Visualisierung. Was hast Du da vor?

    Und dann kommt man ggf. an den Punkt, wo ein Scrollbar oder zwei Buttons (up und down) vielleicht die bessere Idee sind.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Ja, ich benötige nur den up und down Button mit einem Pfeil nach oben und nach unten.

      Gibt es so etwas als html Element? Ich habe leider keine Idee wo ich danach suchen könnte um zu sehen was es so für html Elemente gibt.

      Den up und down Button benötige ich um an anderer Stelle die Anzahl von ein paar Button zu ändern. Wie man das mit jQuery macht, dazu habe ich keine Frage.

      1. Wie es aussieht kann man auf die Folgende Weise Buttons erzeugen. Das Zeichensystem was dort verwendet wird ist wohl Unicode.

        Die Button die ich gerne hätte, sehen so aus wie im Ausgangspost dargestellt, nur eben ohne das mich in diesem Fall störende Formularfeld.

        <button id="up_button">&#9650;</button> <button id="down_button">&#9660;</button>

        Den Unicode den ich nun noch benötige der Unicode für die folgenden Pfeile "<" und ">", nur das sie hoch und runter gehen sollen.

        Wo finde ich den Unicode für solche Pfeile?

        Wie es aussieht gibt es unter folgenden Link eine lange Liste an Unicode Zeichen: https://www.codetable.net/unicodecharacters?page=1

        1. @@Alfredo

          <button id="up_button">&#9650;</button>
          <button id="down_button">&#9660;</button>
          

          Leider sieht man das häufig. Der Fehler ist die Nummer 2 in den Top-5: leere Links und Buttons.

          Jedes interaktive Element braucht eine Beschriftung (Text!), damit es auch von Nutzern bedient werden kann, die die Webseite nicht-visuell wahrnehmen (z.B. von Screereader-Software vorgelesen bekommen).

          Was soll ein Screenreader bei „▲“ (&#9650;) sagen? Im besten Fall wird sowas wie „schwarzes Dreieck nach oben“ angesagt.[1] Verständlich wird die Funktion des Buttons selbst damit nicht.

          Der Beschriftungstext kann visuell versteckt werden. Der Pfeil wird mit aria-hidden vor Screereadern versteckt:

          <button id="up_button">
            <span aria-hidden="true"></span>
            <span class="visually-hidden">mehr</span>
          </button>
          <button id="up_button">
            <span aria-hidden="true"></span>
            <span class="visually-hidden">weniger</span>
          </button>
          

          Für deine Anwendung findest du vielleicht noch passendere Wörter als „mehr“ und „weniger“. Die Styles für .visually-hidden übernimmst du aus dem verlinkten Artikel in dein Stylesheet.


          Den Unicode den ich nun noch benötige der Unicode für die folgenden Pfeile "<" und ">", nur das sie hoch und runter gehen sollen.

          Wo finde ich den Unicode für solche Pfeile?

          In der Zeichentabelle deines Betriebssystems.

          Ich kann mich nicht mehr erinnern, wie genau die Windows-Zeichentabelle aussieht. Unter macOS gibt’s einige Kategorien, so auch eine für Pfeile:

          Screenshot

          Aber du willst ja Pfeilspitzen; englisch arrowhead. Das ins Suchfeld eingegeben:

          Screenshot

          und du findest die Codepoints U+2303 und U+2304.

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

          --
          Ad astra per aspera

          1. VoiceOver macht das so. Andere Screereader sagen womöglich bei Symbolen gar nichts. ↩︎

          1. @@Gunnar Bittersmann

            und du findest die Codepoints U+2303 und U+2304.

            Und wenn einem die Zeichen nicht gefallen (und man keine Schriftart findet, in der sie einem gefallen), kann man sie auch schnell mit SVG zeichnen.

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

            --
            Ad astra per aspera
          2. Diese Pfeile sind nicht „Mac OS“ aka iOS, die sind Unicode. Und sollten damit „in einem anständig sortierten System“ überall vorhanden sein. Natürlich mit den Abweichungen, welche unterschiedliche Schriften mit sich bringen.

            1. @@nix

              Diese Pfeile sind nicht „Mac OS“

              Das hat auch niemand behauptet.

              aka iOS

              Nö. macOS ist das OS, das auf Macs läuft. Daher der Name. Also auf MacBook, iMac, Mac Mini, Mac Pro.

              iOS hingegen ist das OS auf iPhones. Und iPadOS auf … – du wirst es erraten.

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

              --
              Ad astra per aspera
              1. Und weil macOS starb, von iOS beerbt wurde, kann es auch nicht mehr, was mindestens Ⅹ.5 schon beherrscht hat. Beispielsweise das Umgehen mit externen Laufwerken, die während des Ruhezustands, ohne auch nur angefaßt worden zu sein, gleich zweimal „nicht richtig ausgeworfen“ wurden. Klar: iOS hat das bis „heute“ ja nicht gekannt.

                Und es hat, so ganz nebenher, auch das Systemverwaltungs-Tool, „Einstellungen“ genannt, von Android … gestohlen? Incl. dessen Unübersichtlichkeit. Und der da verbauten, weitgehend sinnfreien Suchfunktion.

                Immerhin hat da noch jemand mitbekommen, daß man in den Einstellungen bei den Schriftgrößen „heute“ besser das „pt“ neben den Zahlen weg läßt. Es reicht ja auch so schon, wenn, abhängig von der Bildschirmauflösung, in Finder-Dialogen zur Dateigröße plötzlich etwas wie 2,3KI, hoppla, hier wegen der verwendeten Schrift besser, 2,3K│ behauptet werden. …

        2. Hallo Alfredo,

          nach der fälligen Zugänglichkeitspredigt Gunnars hier noch der Tipp des Tages zu Unicode:

          Frag Mr. Bing Googlesby oder seine beiden Enten (sprich: die Suchmaschine deines geringsten Misstrauens) nach Unicode Arrow Up

          Bei mir kam dann die deutsche Wikipedia hoch:
          https://de.m.wikipedia.org/wiki/Unicodeblock_Pfeile

          Rolf

          --
          sumpsi - posui - obstruxi
          1. @@Rolf B

            nach der fälligen Zugänglichkeitspredigt Gunnars hier noch der Tipp des Tages zu Unicode: […] https://de.m.wikipedia.org/wiki/Unicodeblock_Pfeile

            Hättest du mal nicht nur den ersten Teil meines Postings gelesen, hättest du dir den „Tipp“ sparen können. Im zweiten Teil verwies ich auf Pfeile und auch darauf, dass die gesuchten Zeichen darunter nicht zu finden sind.

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

            --
            Ad astra per aspera
            1. Hallo Gunnar,

              na gut.

              Dann liefert eben die Suche nach "Unicode Triangle" die engl. Version von dem hier:
              https://de.wikipedia.org/wiki/Unicodeblock_Geometrische_Formen

              Rolf

              --
              sumpsi - posui - obstruxi
              1. @@Rolf B

                Dann liefert eben die Suche nach "Unicode Triangle" die engl. Version von dem hier:
                https://de.wikipedia.org/wiki/Unicodeblock_Geometrische_Formen

                Auch das ist nicht der Block, der die gesuchten Zeichen enthält.

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

                --
                Ad astra per aspera
                1. https://de.wikipedia.org/wiki/Unicodeblock_Geometrische_Formen

                  Auch das ist nicht der Block, der die gesuchten Zeichen enthält.

                  Der ist es:

                  Unicodeblock Verschiedene technische Zeichen

          2. Noch ein Link:

            https://unicode-explorer.com/search/

            Nach arrowhead suchen...