HTML/CSS Formular bei Klick in Vordergrund?

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
11.12.2020, 12:00

Hänge einen Listener an den Button und definiere einen Callback für das Klick-Event.

HTML:

<button id="focus-form-button" type="button">Focus</button>

JavaScript:

document.getElementById("focus-form-button").addEventListener("click", function() {
  // do something ...
});

Innerhalb dessen kannst du machen, was auch immer du machen möchtest, um das Formular in den Vordergrund zu stellen (ein bestimmtes Element fokussieren, CSS-Klassen zum Formularelement hinzufügen, etc.).
Kipping01 
Beitragsersteller
 11.12.2020, 12:18

Danke, ich habe einen radio button mit verlinkung, ändert das was?
<input type="button" name="next" class="next action-button" value="WEITER" />

0
Kipping01 
Beitragsersteller
 11.12.2020, 12:20
@Kipping01

Kann ich statt der ID "focus-form-button" auch meine Class nehmen

0
Kipping01 
Beitragsersteller
 11.12.2020, 12:21
@Kipping01

Sorry das war die falsche Zeile, dass ist die richtige:

<input id="mann" name="gender" type="radio">

<label for="mann"class="mann">Männlich</label>

0
regex9  11.12.2020, 12:22
@Kipping01

Ja, den Button (übrigens kein RadioButtton) kannst du auch verwenden. Wenn du weißt, dass die Klassenkombination nur einmal im gesamten Dokument auftritt, kannst du den Button auch so auswählen:

document.querySelector(".next.action-button")
0
regex9  11.12.2020, 12:23
@Kipping01

Na dann tausche nur die ID im JavaScript-Code aus, den ich oben gepostet habe.

0
Kipping01 
Beitragsersteller
 11.12.2020, 12:28
@regex9

Sollte da schon was passieren?
hab das jetzt so eingebunden in den <head>:
<script>

document.querySelector(".mann")

.addEventListener("click", function() {

// do something ...

});

</script>

0
regex9  11.12.2020, 13:23
@Kipping01
  1. Wenn du es in den head einbindest, wird das Skript ausgeführt, bevor der Radiobutton überhaupt existiert. Setze es an das Ende des body-Elements.
  2. Dein Radiobutton hat eine ID, keine Klasse. Daher passt dein Selektor nicht. Schreibe #mann statt .mann.
  3. Sichtbar passieren wird soweit noch nichts.
0
Kipping01 
Beitragsersteller
 11.12.2020, 13:57
@regex9

Alles klar, vielen Dank für die Hilfe. Mit JavaScript kenne ich mich noch nicht wirklich aus wie man sieht :D . Wie mache ich es dann, das mein Formular zum Vorschein kommt und nur das Formular anklickbar ist. Hintergrund soll dann grau werden. Ist schwierig zu beschreiben.

0
regex9  11.12.2020, 14:17
@Kipping01

Jetzt verstehe ich, was du möchtest. Du suchst nach einer Lightbox.

Mach es dir einfach, nutze fancybox: https://fancyapps.com/fancybox/3/. Damit sich das Popup nicht einfach schließt, kannst du das Property clickSlide (schau hier) auf false setzen. Bzw. als data-Attribut auf dem a-Tag:

data-click-slide="false"
0
Kipping01 
Beitragsersteller
 11.12.2020, 14:54
@regex9

Ja genau Danke :) dann probier ich das mal aus.

0