Frage zu Tabellen mit "unsichtbarem Inhalt"

mariusvon · 14. November 2018

Hallo liebe Community,

gibt es eine Möglichkeit in HTML oder/mit CSS eine Tabelle zu erstellen, wo ein Eingabefeld drüber ist, um die richtige Lösung einzugeben? Hier ein Beispiel:

(Frage:) Nenne die einwohnerreichste Stadt in Deutschland

[Eingabefeld] [Enter]

[Tabelle mit der unsichtbaren richtigen Lösung Berlin]

Also quasi so eine Art "Auslöser" der bei richtiger Eingabe den Inhalt der Tabelle aufdeckt.

Eine etwas speziellere Anfrage, freue mich trotzdem über eure Hilfen.

Freundliche Grüße,

Marius

Arne Drews · 14. November 2018

Um die Frage zu beantworten: Ja

Details: Eingabeerkennung erfordert JavaScript

Sempervivum · 14. November 2018

Vielleicht so:

Code

    <style>
        .frage:valid + span {
           display: inline;
        }
        .frage + span {
            display: none;
        }
    </style>
    Nenne die einwohnerreichste Stadt in Deutschland
    <input class="frage" required pattern="^Berlin$">
    <span>Die Tabelle für Berlin</span>
    Nenne die zweitgrößte Stadt in Deutschland nach Einwohnerzahl
    <input class="frage" required pattern="^Hamburg$">
    <span>Die Tabelle für Hamburg</span>

Alles anzeigen

Allerdings weiß ich nicht genau, wie das mit der Tabelle gemeint ist.

reinhardp · 17. November 2018

Ja, mittels dem onkeyup Event und der Abfrage ob "Enter" gedrückt wurde.

Bei mir bei einer Suche

Im input field:

onkeyup="entersearch(this, event)"

In Javascript:

function entersearch(data, event) {

if(event.keyCode === 13) {

.....

}

was in data oder event kommt per JS - Debugger herausfinden.

Hab ich schon sehr oft für verschiedene Projekte gemacht.

Frage zu Tabellen mit "unsichtbarem Inhalt"

Jetzt mitmachen!

Teilen