Allgemeine Formulareingabeaufforderungen werden immer die Position des Formulars einnehmen, wodurch das Formular länger oder breiter wird, was das Layout beeinflusst. Dieses Problem kann jedoch gelöst werden, wenn das Eingabeaufforderung neben dem erforderlichen Inhalt wie einem Dialogfeld schwebt.
HTML und StileZuerst ein Formular machen
<div id=form-block> <h1>Register</h1> <form id=form-form class=center-block> <div> <input id=email class=form-control placeholder=email> </div> <div> <input id=vrf class=form-control placeholder=verification code> </form> </div></div>
Dann müssen wir das Dialogfeld entwerfen
Es ist wahrscheinlich das, bestehend aus einem Dreieck und einem Rechteck.
#tips {padding-top: 6px; Z-Index: 9999; /*Drücken Sie das Gespräch, um nicht durch andere Elemente zu verdecken*/ Position: behoben; Breite: 1000px; } #Form-Tipps {Hintergrundfarbe: Schwarz; Farbe: #ffffff; Polsterung: 0 6px; Position: absolut; } #Triangle {Border: 10px Solid; Grenzfarben: transparent schwarz transparent; } <div ID = Alter> <Label ID = Triangle> </label> <Label ID = Form-Alert> Dies ist eine Eingabeaufforderung </label> </div>Wie kam das Dreieck? Beziehen Sie sich auf diese Erfahrung
JS -Implementierung schwebenDie Seite ist bereits erledigt, und jetzt benötigen wir eine Funktion, um den Inhalt und die Position des Dialogfelds zu ändern.
const tips = document.getElementById (Tipps); // msg ist die Eingabeaufforderungsinformation, OBJ ist das Element, das die Funktionshowtips (msg, obj) {tips.style.display = block; // versteckte Dialog -var -dialog var domrect = obj.getBoundClientswiddhrekt (). // Zeigen Sie es hinter dem Element an, fügen Sie also die breite varhöhe = domrect.y hinzu; Tips.style.top = Höhe+PX; Tips.style.left = width+px; document.getElementById (Form-Tipps) .innerhtml = msg; // Ändern Sie den Dialogtext obj.onblur = function () {tips.style.display = none; // Ausblenden Sie das Dialogfeld aus, wenn das Element außerhalb des Fokus ist // Da ich es in einer Tabelle hier verwende, verwende ich es nicht im Fokus und ändere es nach Bedarf}; window.onResize = function (ev) {showtips (msg, obj); // Berechnen Sie die Position des Dialogfelds neu, wenn das Fenster Größe ändert}}Reproduktionsdiagramm
Vollständiger Code d
<! DocType html> <html Lang = en> <kopf> <meta charset = utf-8> <title> title </title> <link rel = styleSheet href = ../static/css/bootstrap.css> <Styles> body, html {background-color: #70A1ff; Rand: 0; Polsterung: 0; Breite: 100%; Höhe: 100%; } body *{Übergangsdauer: 500 ms; } #Form-Block {text-align: center; Position: absolut; Top: 50%; Links: 50%; Breite: 500px; Höhe: 200px; Hintergrundfarbe: #F1F2F6; Transformation: Translatey (-50%) Translatex (-50%); Box-Shadow: 0 0 10px #000000; } #Form-Form {Breite: 70%; } #Form-Form> *{Margin: 10px; } #E-Mail-Warning {display: Keine; } #tips {padding-top: 6px; DS Z-Index: 9999; Position: fest; Breite: 1000px; } #Form-Tipps {Hintergrundfarbe: Schwarz; Farbe: #ffffff; Polsterung: 0 6px; Position: absolut; } #Triangle {Border: 10px Solid; Grenzfarben: transparent schwarz transparent; } </style> </head> <body> <div id = tips> <label id = triangle> </label> <label id = Form-TIPS> Dies ist eine Eingabeaufforderung </label> </div> <div ID = Form-block> <h1> Register </h1> <Formular id = Form-Form-Form-Form-Center-Block> <div> <Eingabe auf FORbocus = Form-c-cro-c-cro-c-cro-c-cro-c-cro-c-cro-form. Placeholder = E-Mail> <div id = E-Mail-Warn-Klasse = Label-Warning> Bitte geben Sie die richtige E-Mail-Adresse ein! </div> <!-<button οnclick = ChangeFormHeight ('500')> Test </button>-> <skript> const tips = document.getElementById (Tipps); Funktionshowtips (msg, obj) {tips.style.display = block; var domrect = obj.getBoundingClientRect (); var width = domrect.x+obj.clientwidth; var height = domRect.y; Tips.style.top = Höhe+PX; Tips.style.left = width+px; document.getElementById (Form-Tipps) .innerhtml = msg; obj.onblur = function () {tips.style.display = none; }; window.onResize = function (ev) {showtips (msg, obj); }} </script> </body> </html> ZusammenfassenDas obige ist der Implementierungscode der vom Editor vorgestellten HTML -Floating -Eingabeaufforderung -Funktion. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!
Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, drucken Sie ihn bitte nach. Bitte geben Sie die Quelle an, danke!