MrSmith: DIV- oder anderes HTML-Element agieren lassen wie ein INPUT-Element

Also kurz und Knapp: Ich habe ein DIV-Element und möchte es innerhalb eines FORMs agieren lassen wie ein INPUT-Element. Also dass der VALUE-Tag übermittelt wird.

Ist dies irgendwie möglich?

Ich habe schon über ein hidden input nachgedacht. Möchte aber möglichst darauf verzichten, wenn das möglich ist.

  1. Moin!

    Also kurz und Knapp: Ich habe ein DIV-Element und möchte es innerhalb eines FORMs agieren lassen wie ein INPUT-Element. Also dass der VALUE-Tag übermittelt wird.

    Ist dies irgendwie möglich?

    Ja. Mit ein wenig Javascript und DOM-Zauber ... was aber hier eher ungünstig ist.

    Ich habe schon über ein hidden input nachgedacht. Möchte aber möglichst darauf verzichten, wenn das möglich ist.

    Vielleicht willst Du ein "schreibgeschütztes"(*) input-Feld?

    <input name="schreibnicht" value="Tralalla" readonly>
    

    *) Nein, man kann sich nicht darauf verlassen, dass da nicht manipuliert wird.

    Jörg Reinholz

    1. Hi!

      <input name="schreibnicht" value="Tralalla" readonly>
      

      *) Nein, man kann sich nicht darauf verlassen, dass da nicht manipuliert wird.

      Das kann man sich auch bei einem DIV nich. Bei überhaupt keinem Formular. Also is es egal. Oder?

      Nächtliche Grüße, Le Steel

  2. Hi,

    Also kurz und Knapp: Ich habe ein DIV-Element und möchte es innerhalb eines FORMs agieren lassen wie ein INPUT-Element. Also dass der VALUE-Tag übermittelt wird.

    value-Tags gibt's in HTML m.W. nicht. Du meinst value-Attribut.

    div-Elemente haben kein value-Attribut und auch kein name-Attribut. Also kann deren value-Attribut auch nicht übertragen werden.

    Der einfachste Weg, um "DIV- oder anderes HTML-Element agieren lassen wie ein INPUT-Element" zu erreichen, ist, anstelle des div ein anderes Element zu verwenden, und zwar ein input-Element. Und schon verhält sich das "andere" Element exakt so wie ein input-Element.

    Ist dies irgendwie möglich?

    ja, s.o.

    Ich habe schon über ein hidden input nachgedacht. Möchte aber möglichst darauf verzichten, wenn das möglich ist.

    Warum? Du willst das Verhalten eines input-Elements, dann nimm auch ein input-Element.

    cu,
    Andreas a/k/a MudGuard

    1. Naaabend

      Warum? Du willst das Verhalten eines input-Elements, dann nimm auch ein input-Element.

      Eben. Ich hab irgendwie die Frage nichtmal verstanden. Wenn ich eine Katze will, kauf ich mir doch auch keinen Hund und bring ihm bei, sich wie ne Katze zu verhalten.

      1. Hi,

        Warum? Du willst das Verhalten eines input-Elements, dann nimm auch ein input-Element.

        Eben. Ich hab irgendwie die Frage nichtmal verstanden. Wenn ich eine Katze will, kauf ich mir doch auch keinen Hund und bring ihm bei, sich wie ne Katze zu verhalten.

        Aber Veganer machen sowas, die kaufen sich Tofu, und das soll dann wie ein Schnitzel oder wie eine Bratwurst schmecken ...

        cu,
        Andreas a/k/a MudGuard

        1. Eben. Ich hab irgendwie die Frage nichtmal verstanden. Wenn ich eine Katze will, kauf ich mir doch auch keinen Hund und bring ihm bei, sich wie ne Katze zu verhalten.

          Aber Veganer machen sowas, die kaufen sich Tofu, und das soll dann wie ein Schnitzel oder wie eine Bratwurst schmecken ...

          :D

          Genau. Das sag ich auch dauernd. Wollen kein Fleisch oder Milchprodukte oder Ei essen aber unbedingt Bratwurst, Schnitzel, Käse... Ich versteh es nicht.

        2. Hallo MudGuard,

          Aber Veganer machen sowas, die kaufen sich Tofu, und das soll dann wie ein Schnitzel oder wie eine Bratwurst schmecken ...

          Nein, das sind nur die Omnivore, die Tofu probieren und dann enttäuscht sind, dass es nicht wie Fleisch schmeckt.

          LG,
          CK

  3. Um mal die Fragen aufzuklären, warum ich denn kein INPUT-Element einfach nehme ...

    http://www.gaestebuch-umsonst.ws/spinknob.php

    Es handelt sich um ein Control, welches ich NICHT mittels input-elementen umsetzen kann.

    Ich habe vorläufig eine dymaische Einbindung eines Hidden-Input-Elements umgesetzt. Die Attribute aus dem Div-Element, welche eigentlich nicht existieren bzw vom DIV akzeptiert werden würden, werden dabei trotzdem genutzt und übernommen.

    Aktuell ist der Source kein Deut optimiert und OOP-Fähig gemacht. Es handelt sich noch immer um ein Test.

    Aktuell möchte ich am liebsten noch, dass die Grenzwerte der Mausbewegung beim Erreichen der Grenzwerte des Controls "mitverschoben" werden, wenn diese überschritten werden. Schwer zu erklären. Daher eine kurze Visualisierung:

    Visualisierung

    Dabei ist der erscheinende Balken als imaginär zu betrachten. Das Beige des Balkens ist der mögliche Bereich. Das lila-werdende ist der entsprechende Wert, welcher an das Control übergeben wird (dieser rotiert dann). Erreicht man das Ende des Balkens, wird dieser "mitverschoben". Erreicht man den Anfang des Balkens, wird dieser halt eben auch wieder mit verschoben.

    Ich hoffe, so konnte ich das verständlich erklären und dass mir da jemand helfen könnte :)

    1. @@MrSmith

      Um mal die Fragen aufzuklären, warum ich denn kein INPUT-Element einfach nehme ...

      http://www.gaestebuch-umsonst.ws/spinknob.php

      Es handelt sich um ein Control, welches ich NICHT mittels input-elementen umsetzen kann.

      Nicht? Sieht für mich aus wie <input type="range">.

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      1. Dann hast du scheinbar eine krumme Sichtweise. Ein Range-Input-Element wird 1. erst seit HTML5 angeboten, 2. ist es nur minimal anpassbar und 3. ist es nicht RUND und somit "klein", was ja das explizite Feature meines ... und da kommen wir zu 4. DREH-KNOPFES ist.

        Ein Schieberegler hätte es auch getan. ABER dieser nimmt relativ zur Funktionsweise viel Platz ein. Stell dir vor, du müsstest etwa 100 Werte mittels 0bis100-Parametern füttern. Dann wäre ein 10x10-Grid viel übersichtlicher als eine 100-Zeilen-Schieberegler-Liste.

        Somit: Es gibt keine INPUT-Alternative für mein gewünschtes optisches Ergebnis.

        Edit: Du scheinst die Darstellung falsch verstanden zu haben. Hierbei ist der erscheinende Balken, welchen du als RANGE-Input erkannt hast, als imaginär, also "nicht existent" zu betrachten. Dies sollte lediglich visualisieren, wie der Bereich, auf welchem das Control am ende Reagiert, mit den Grenzen des Aktionsbereiches mitgeschoben wird, sollte die Maus diese Grenzen überschreiten wollen.

        1. @@MrSmith

          Dann hast du scheinbar eine krumme Sichtweise.

          Nein.

          Ein Range-Input-Element wird 1. erst seit HTML5 angeboten, 2. ist es nur minimal anpassbar und 3. ist es nicht RUND und somit "klein",

          Welches HTML-Element zu verwenden ist, hängt mitnichten von „rund“, „klein“ oder sonstigen darstellungsbezogenen Dingen ab, sondern von der Funktion. Zur Eingabe eines Wertes aus einem bestimmten Beeich ist <input type="range"> genau das richtige. Oder <input type="number" min="" max="" step="">

          Damit ist das Funktionieren der Seite gewährleistet. Und das auch barrierefrei.

          Mit CSS und JavaScript kann man das Element nach Belieben umgestalten, wenn man denn aufpasst, dass die gegebene Funktionalität nicht verloren geht.

          was ja das explizite Feature meines ... und da kommen wir zu 4. DREH-KNOPFES ist.

          Wie dreht man denn einen Knopf auf einer Webseite?

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          1. Hi,

            Wie dreht man denn einen Knopf auf einer Webseite?

            Mit zwei Fingerspitzen berühren und dann die Hand drehen, so daß beide Fingerspitzen einen Kreisbogen beschreiben (ersatzweise mit der. 2. Hand das Gerät unter den Fingerspitzen drehen).

            Nicht-Touch-User haben halt Pech gehabt ...

            cu,
            Andreas a/k/a MudGuard

            1. Hallo,

              Wie dreht man denn einen Knopf auf einer Webseite?

              Mit zwei Fingerspitzen berühren und dann die Hand drehen, so daß beide Fingerspitzen einen Kreisbogen beschreiben (ersatzweise mit der. 2. Hand das Gerät unter den Fingerspitzen drehen).

              Nicht-Touch-User haben halt Pech gehabt ...

              nö, wieso?

              Die klicken mittig auf den Drehknopf, halten die Maustaste gedrückt und drehen dann die Maus auf der Stelle. ;-)

              Ciao,
               Martin

              1. Danke für die info, dass ich in diesem Forum keine anständige Antwort mehr erhalte. -.-

                1. Es ist ein DREHKNOPF, welcher durch seitliches Drag&Drop bedient wird.
                2. Die Größe des Objektes liegt bei möglichen 16x16 Pixeln. Ein RANGE oder NUMBER benötigt weitaus mehr als Mindestgröße
                3. Meine Frage war relativ einfach. Dennoch wird hier aggressiv dagegen protestiert.
                4. Meine zweite Frage war klar und verständlich formuliert und sogar mit einer optischen animierten Darstellung untermauert. Dennoch scheint NIEMAND den Text komplett gelesen und auch verstanden zu haben und pocht weiterhin auf das "Nimm doch ...-input ..." argument. Es ist grauenhaft, wie beschränkt ihr in diesem fall seid.

                Nochmal zur Klärung: ES IST EIN DREHKNOPF. Wer sich mit Musikproduktions-Software auskennt, wird bei VIELEN Vst-Plugins drehknöpfe finden. Und diese lassen sich entweder durch winkelberechnete Mausposition rotieren (Relativer Winkel wird auf Drehknopf übertragen) oder durch vertikale bzw horizontale Mausbewegung gedreht. Und in meinem Fall habe ich mich für die horizontale Variante entschieden.

                Nochmal zum Verständnis:

                • Ein RANGE-Element ist eine waagerechte (oder senkrechte) Leiste, welche mit der Maus bedient wird.
                • Ein RANGE-Element lässt sich NICHT 100%ig mittels CSS anpassen. Das ist eine TATSACHE! Zitat: <wenn man denn aufpasst, dass die gegebene Funktionalität nicht verloren geht>
                • Ein NUMBER-Element ist ein Eingabefeld, welches man zwar optisch anpassen kann, es aber NICHT nach der Methode bedienen kann, wie es mit einem RANGE-Element möglich wäre
                • Beide Elemente nehmen ungemein mehr platz ein, als ein 16x16 großes Element, welches man durch waagerechtes "ziehen" bedienen kann, ohne es zu verschieben.

                Mein Verlinktes Beispiel dürfte doch klar gemacht haben, welche OPTISCHE komponente ich anstrebe, oder? Dennoch pocht ihr explizit darauf, dass ich was anderes nehmen soll.

                Damit beende ich diese unnötige Diskussion, da ein Umdenken eurerseits scheinbar völlig außer Frage steht. Ihr seid zu verbissen darauf, alles nach W3C stur einzuhalten und nichts neues auszuprobieren.

                Danke -.-

                1. Tach,

                  1. Es ist ein DREHKNOPF, welcher durch seitliches Drag&Drop bedient wird.
                  2. Die Größe des Objektes liegt bei möglichen 16x16 Pixeln. Ein RANGE oder NUMBER benötigt weitaus mehr als Mindestgröße
                  3. Meine Frage war relativ einfach. Dennoch wird hier aggressiv dagegen protestiert.
                  4. Meine zweite Frage war klar und verständlich formuliert und sogar mit einer optischen animierten Darstellung untermauert. Dennoch scheint NIEMAND den Text komplett gelesen und auch verstanden zu haben und pocht weiterhin auf das "Nimm doch ...-input ..." argument. Es ist grauenhaft, wie beschränkt ihr in diesem fall seid.

                  es könnte auch einfach daran liegen, dass sie wissen, dass dies mit einem input-Element erreichbar ist (https://github.com/aterrien/jQuery-Knob ist ein sicher nicht perfektes Beispiel dafür, wie ein Drehknopf funktionieren kann), womit es automatisch einen barriearmen Fallback hat und du dir die Hinweise mal genauer anschauen solltest.

                  • Ein RANGE-Element ist eine waagerechte (oder senkrechte) Leiste, welche mit der Maus bedient wird.

                  Nein, ein Input-Element vom Type Range ist ein Input, dass einen numerischen Bereich abbildet; du sprichst davon, wie die Standardansicht dieses Elemnts aussieht, nicht vom inhaltlichen

                  • Ein RANGE-Element lässt sich NICHT 100%ig mittels CSS anpassen. Das ist eine TATSACHE!
                  • Ein NUMBER-Element ist ein Eingabefeld, welches man zwar optisch anpassen kann, es aber NICHT nach der Methode bedienen kann, wie es mit einem RANGE-Element möglich wäre

                  Aber mit Javascript + CSS und das brauchst du für deine Lösung eh, Vorteil des Range ist dann, dass es auch ohne Javascript funktioniert.

                  • Beide Elemente nehmen ungemein mehr platz ein, als ein 16x16 großes Element, welches man durch waagerechtes "ziehen" bedienen kann, ohne es zu verschieben.

                  In ihrer Standarddarstellung, aber davon redet hier ja keiner.

                  mfg
                  Woodfighter