Spezielles HTML Inputfeld entwerfen

[hmm]

Hi Leute,

ich suche ein HTML Inputfeld, welches:

a) Im Ruhezustand den gesamten Inhalt anzeigt. Sollte viel an Inhalt drin stehen, so soll der Inhalt über mehrere Zeilen verteilt werden.

b) Wenn man in das Inputfeld klickt, soll man ein Menü angezeigt bekommen, in welchem man bestimmte Dinge ankreuzen kann

Beispiel: Ruhezustand (mit Leerzeile falls zulang): Hauptfach, Nebenfach, Wahlfach

Wenn angeklickt, soll so eine Liste angezeigt werden: [] Hauptfach [] Nebenfach [] Wahlfach

Das HTML Feld soll außerdem Speichern, wenn etwas davon angeklickt wurde.

wie würdet ihr sowas realisieren? bzw. welche Elementkombinationen sind das? meine aktuelle Lösungidee wäre, dass ich ein html select feld erstelle, mit Option1: "Hauptfach, Nebenfach, \nWahlfach" Option2: Hauptfach Option3: Nebenfach Option4: Wahlfach

Und ich per javascript verhindere das option 1 angeklickt werden kann, problem dabei ist nur, dass ich erlauben möchte das mehrere dinge angeklickt werden.

Habt ihr ein paar Ideen dazu? Ich würde das auch sehr gerne so realisieren wie hier bei Selfhtml die "Tags"-, "vergebene Tags"-Boxen realisiert wurden, wie macht man sowas?

[Gunnar Bittersmann]

@@hmm

ich suche ein HTML Inputfeld, welches:

a) Im Ruhezustand den gesamten Inhalt anzeigt. Sollte viel an Inhalt drin stehen, so soll der Inhalt über mehrere Zeilen verteilt werden.

<textarea>

Wenn angeklickt, soll so eine Liste angezeigt werden: [] Hauptfach [] Nebenfach [] Wahlfach

<input type="checkbox">

b) Wenn man in das Inputfeld klickt, soll man ein Menü angezeigt bekommen, in welchem man bestimmte Dinge ankreuzen kann
wie würdet ihr sowas realisieren?

Gar nicht.

Warum sollen die Checkboxen nicht gleich angezeigt werden?

LLAP 🖖

[hmm]

danke, textarea bringt mir schonmal was.

damit man im unangeklickten zustand einfacher sehen kann was gewählt wurde. die seite wird wahrscheinlich 10 unangeklickte optionen haben und nur 2-3 angeklickte

beispiel

geometrie|Hauptfach, Nebenfach

wenn ich in die Zelle klicke sehe ich

[x] Hauptfach

[x] Nebenfach

[] Wahlfach

Klicke ich wahlfach an so wird das übernommen und ich kriege

geometrie | Hauptfach, Nebenfach, Wahlfach

wie macht man sowas?

[hmm]

macht man sowas eventuell dadurch dass man mit javascript ein klickevent definiert, welches beim klick die form "textarea" in checkbox umwandelt?

[Auge]

Hallo

macht man sowas eventuell dadurch dass man mit javascript ein klickevent definiert, welches beim klick die form "textarea" in checkbox umwandelt?

Ich würde ja eher beim Event "Checkbox an- oder abgewählt" den Wert der Checkbox in die Liste schreiben oder daraus löschen, die selbst HTML-seitig unabhängig von den Checkboxen ist. Ob Klick das richtige Event ist (wegen Touch- oder Tastaturbedienung), sei mal dahingestellt.

Tschö, Auge

[Rolf B]

Hallo hmm,

Denk dir eine Lösung aus, die auch ohne JavaScript funktioniert. Das wäre ein select mit multiple Option. Oder eine Liste von Checkboxen. Wenn JavaScript aktiv ist, kannst du das für die Anzeige zur textarea umschalten. Vielleicht geht es über den :focus Selektor auch ohne JavaScript. Keine Zeit für ein Beispielfiddle, bin ab jetzt bis Sonntag Abend on Tour.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Das wäre ein select mit multiple Option.

Nein, das ist keine Option. (Es sei denn, das Ding ist nur für einen selbst oder für einen sehr engen, wohlbekannten Nutzerkreis.)

LLAP 🖖

[Gunnar Bittersmann]

@@Rolf B

Oder eine Liste von Checkboxen. […] Vielleicht geht es über den :focus Selektor auch ohne JavaScript.

:focus für die Box (fieldset) um die Checkboxen? Nee, geht nicht. Sobald man eine Checkbox fokussiert, verliert die umschließende Box ja den Fokus.

Was aber geht: :focus-within [Selectors Level 4 ED] – in unterstützenden Browsern als progressive enhancement.

Keine Zeit für ein Beispielfiddle, bin ab jetzt bis Sonntag Abend on Tour.

Codepen: Away team

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Was aber geht: :focus-within [Selectors Level 4 ED] – in unterstützenden Browsern als progressive enhancement.

Codepen: Away team

Und so geht’s:

.multiple-select-widget:not(:hover):not(:focus-within) input,
.multiple-select-widget:not(:hover):not(:focus-within) :not(:checked) + span
{
	display: none;
}

Wenn der Mauscursor nicht über der umschließenden Box liegt (:not(:hover)) und weder sie noch eine Checkbox den Fokus hat (:not(:focus-within)), dann werden alle Checkboxen (input) und alle Beschriftungen nicht-angehakter Checkboxen (:not(:checked) + span) ausgeblendet. Sichtbar bleiben also die Beschriftungen aller angehakter Checkboxen.

Wenn der Mauscursor über der umschließenden Box liegt oder sie oder eine Checkbox den Fokus hat, dann sind alle Checkboxen mit ihren Beschriftungen zu sehen. Wenn ein Browser :focus-within nicht unterstützt, dann auch.

Der Rest der Regeln ist Schmuck am Kleid.

LLAP 🖖

PS: Das div habe ich eingefügt, weil WebKits sich beharrlich weigern, display: flex auf fieldset anzuwenden. Meh.

[hmm]

moin,

danke, ich versuch das zu verstehen, ich poste dann das beispiel.

.multiple-select-widget:not(:hover):not(:focus-within) input,
.multiple-select-widget:not(:hover):not(:focus-within) :not(:checked) + span
{
	display: none;
}

das würde ich jetzt einfach an son ganz normales select html feld kleben?

<select class = "gebootstrapedWeilWenigAhnungVonCss" id="ichVersteheDenMultipleFocusWithinNet" multiple>
  <option selected="selected">
    Hauptfach
  </option>
  <option selected="selected">
    Nebenfach
  </option>
  <option>
    Wahlfach
  </option>
</select>

[hmm]

<!DOCTYPE html>
<html leng="de">
<head>
    <meta charset="utf-8">
    <title>fieldset and legend example</title>
    <style>
        .multiple-select-widget:not(:hover):not(:focus-within) input,
        .multiple-select-widget:not(:hover):not(:focus-within) :not(:checked) + span
        {
        	display: none;
        }
    </style>
</head>

<body>
    <select class = "gebootstrapedWeilWenigAhnungVonCss" id="ichVersteheDenMultipleFocusWithinNet" multiple>
        <option selected="selected">
            Hauptfach
        </option>
        <option selected="selected">
            Nebenfach
        </option>
        <option>
            Wahlfach
        </option>
    </select>
</body>
</html>

so ist das wahrscheinlich nicht gedacht oder?

[Gunnar Bittersmann]

@@hmm

das würde ich jetzt einfach an son ganz normales select html feld kleben?

Natürlich. Nicht.

Hast du ein Grundverständnis davon, wie CSS und Selektoren funktionieren? Wenn nicht, wäre jetzt ein guter Zeitpunkt, das nachzuholen.

Und wie ich schon sagte, solltest du ganz schnell vergessen, dass es multiple für select gibt. Es sei denn, du weißt sehr genau, was du tust. Mit Betonung auf „du“. Und damit ist nicht der Zeitpunkt der Entwicklung der Webseite gemeint, sondern deren Anwendung.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Und wie ich schon sagte, solltest du ganz schnell vergessen, dass es multiple für select gibt. Es sei denn, du weißt sehr genau, was du tust. Mit Betonung auf „du“. Und damit ist nicht der Zeitpunkt der Entwicklung der Webseite gemeint, sondern deren Anwendung.

@hmm

Es sei denn, du schreibst eine Bedienungsanleitung daneben mit dem Hinweis, dass es ohne Maus und Tastatur nicht funktioniert.

Bis demnächst
Matthias