Heute hat mir der Projektmanager nur einen Job gegeben und mich gebeten, eine solche Funktion zu implementieren: Ich möchte das Textfeld des Bestätigungscode eingrenzen und dann ein Bild des Bestätigungscodes auf der rechten Seite hinzufügen. Bei reaktionsschnellem Layout kann das Bild des Bestätigungscodes beim Zugriff auf die mobile Terminal auf derselben Zeile wie das Bestätigungscode -Textfeld aufbewahrt werden. Wie mache ich das? Es war lange Zeit schwierig, und später fand ich die Idee der Verwirklichung. Der Herausgeber wird meinen Ideen und meinen Implementierungsprozess mit Ihnen teilen. Wenn Sie Fragen haben, stellen Sie sie bitte und lernen Sie zusammen und machen Sie gemeinsam Fortschritte!
Implementierungsideen:
Implementierungsrenderungen
Fügen Sie den Grid -Layout -Code von Bootstrap selbst selbst zu, um das Layout unter verschiedenen Auflösungen zu steuern.
Die einzige Voraussetzung für diese Implementierung ist, dass die Höhe Ihres Verifizierungscode -Images mit der Höhe des Eingabefeldes übereinstimmt (die Höhe des Eingabefeldes beträgt ca. 34px).
Danach wird es einfach sein. Lassen Sie das Bild des Überprüfungscode -Bildes im Eingabefeld überlappen und verwenden Sie das Absolute -Layout, um es zu vervollständigen.
PS: Denken Sie daran, dem Eingabefeld einen Padding-Links-Wert hinzuzufügen (nur größer als Ihre Verifizierungscode-Breite), andernfalls blockiert er den Text.
<Styles> #captcha {Border-Radius: 2px; Cursor: Zeiger; Position: absolut; Z-Index: 3; links: 0; obere: 0;}#validateCode {padding-links: 110px;} </style> <div> <DiviL> <Label für = "validateCode"> Verifizierung code <kleines. id="captcha"src='data:image/png;base64,{{Captcha::doimg()['imgCode']}}'><input type="text"id="validateCode" name="validateCode"placeholder="Four-digit character verification code"></div></div>Lassen Sie mich dem Fragesteller meine Lösung zeigen. Dies ist eine Website, über die ich schreibe. Die Größe des Bildes steht im Einklang mit der Höhe des Eingangsfelds. Es besteht keine Notwendigkeit, die Eingangsbreite zu ändern. Lassen Sie einfach das Bild des Verifizierungscode das Eingabefeld abdecken. Fügen Sie dann dem Eingang einen Padding-Links-Wert hinzu. Die Größe ist etwas größer als die Breite des Verifizierungscodebildes. Es ist unpraktisch, Fragen auf Ihrem Telefon zu beantworten. Ich werde es ausführlich erklären, wenn ich zurück gehe.
Das obige ist die Implementierungsmethode des Textfelds in Bootstrap, das ich Ihnen vorgestellt habe, indem ich die Breite des Textfelds verengt und ein Verifizierungscode -Bild hinzufügt. 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!