js implementiert einige Funktionen der Eingabekomponente in Element und kapselt sie in eine Komponente (Beispielcode)
|
Derzeit sind die Felder „Grundlegende Verwendung“, „Löschbar“ und „Passwort“ implementiert. Referenzlink: https://element.eleme.cn/#/zh-CN/component/input
HTML-Code: Wenn Sie eine Komponente testen möchten, entfernen Sie einfach die Kommentarzeichen aus der entsprechenden Komponente. Denken Sie daran, die rot markierten JS- und CSS-Elemente an Ihre eigene Position anzupassen.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>js implementiert löschbare Eingabekomponente</title>
<script src="../js/input/jsInput.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jsInput.css"/>
</Kopf>
<Text>
<Skript>
//Gewöhnliches Eingabeeingabefeld document.write(createElementInput())
// Löschbare Funktion hinzufügen
//Dokument.schreiben(createElementInput("löschbar"))
//Implementieren Sie das Passwortfeld show-password
//document.write(createElementInput("Passwort anzeigen"))
</Skript>
</body>
</html>JS-Code:
Funktion createElementInput(str){
var temp = str;
var html = "<div id='my_input_div' onmouseover='addClearNode(\""+str+"\")'' onmouseout='hiddenClearNode(\""+str+"\")''>";
html += "<input id='my_input' placeholder='Bitte geben Sie Inhalt ein'";
wenn(str){
if(str == 'Passwort anzeigen'){
html+=" Typ = 'Passwort' ";
}
}
html += "oninput='addClearNode(\""+str+"\")'";
html += "beim Klicken ='Farbänderung(\""+str+"\")'";
html += "onblur='hiddenClearNode(\""+str+"\")'/>";
wenn(str){
html += "<input id='"+str+"' onmousedown='changeValue(\""+str+"\")'/>";
}
html += "</div>"
HTML zurückgeben;
}
//box-shadow: 0 0 0 20px pink; Zeige den Rahmen durch Hinzufügen von Schatten an function changeColor(str){
//Alarm(str)
document.getElementById("mein_input_div").style.boxShadow="0 0 0 2px #409eff";
//Wert der Eingabe abrufen var value = document.getElementById('my_input').value;
var button = document.getElementById(str);
//Fügen Sie eine Prüfung hinzu, ob im Eingabefeld ein Wert vorhanden ist, und zeigen Sie dann die Schaltfläche „Löschen“ an, wenn (Wert) {
wenn(Schaltfläche){
button.style.visibility = "sichtbar"
}
}
}
//Sie sollten dieses Ereignis nach dem Aufrufen der Inhaltsfunktion addClearNode (str) verwenden. {
var Wert = document.getElementById('my_input').Wert;
var button = document.getElementById(str);
//Alarm(Wert)
wenn(Wert){
wenn(Schaltfläche){
//Schaltfläche so einstellen, dass sie sichtbar ist button.style.visibility = 'visible'
}
}anders{
//Beurteilen, ob das Attribut existiert if(button){
//Schaltfläche unsichtbar machen button.style.visibility = 'hidden'
}
}
//Nach der Auswahl fügt div den ausgewählten Stil hinzu und hebt hervor document.getElementById("my_input_div").style.outline="0 0 0 2px #409eff";
}
//Ändere den Wert in der Eingabefunktion changeValue(str){
wenn(str){
wenn(str == 'löschbar'){
Werte löschen(str);
}sonst wenn(str == 'Passwort anzeigen'){
Passwort anzeigen();
}
}
}
// Eingabewerte löschen Funktion clearValues(str) {
document.getElementById("meine_Eingabe").value = "";
document.getElementById(str).style.visibility = "versteckt";
//Immer noch im ausgewählten Status. Div-Rand hebt Schatten hervor. document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}
//Die Löschtaste ausblenden Funktion hiddenClearNode(str){
var button = document.getElementById(str);
wenn(Schaltfläche){
button.style.visibility="versteckt";
}
//Setze den Div-Schatten auf 0
document.getElementById("mein_input_div").style.boxShadow="0 0 0"
}
//Passwort anzeigen Funktion showPassword(){
var meinInput = document.getElementById('mein_input');
var Passwort = meinInput.Wert;
var Typ = meinInput.Typ;
//Alarm(Typ)
wenn(Typ){
if(Typ == 'Passwort'){
meinInput.type = '';
myInput.value = Passwort;
}anders{
myInput.type = 'Passwort';
myInput.value = Passwort;
}
}
//Immer noch im ausgewählten Status. Div-Rand hebt Schatten hervor. document.getElementById("my_input_div").style.boxShadow="0 0 0 2px #409eff"
}CSS Code:
#mein_Eingabediv{
Breite: 150px;
Rand: 1px massives Silber;
Rahmenradius: 4px;
Position: relativ;
}
#meine_Eingabe{
Höhe: 30px;
Breite: 100px;
Rand links: 6px;
Rand: keiner;
Gliederung: keine;
Cursor: Zeiger;
}
#löschbar{
Höhe: 20px;
Breite: 15px;
Textausrichtung: zentriert;
Sichtbarkeit: versteckt;
Rand: keiner;
Gliederung: keine;
Farbe: #409eff;
Cursor: Zeiger;
Hintergrundbild: URL (../Bild/klar.svg);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 12px;
Position: absolut;
oben: 10px;
links: 120px;
Anzeige: Inline-Block;
}
#Passwort anzeigen{
Höhe: 20px;
Breite: 15px;
Textausrichtung: zentriert;
Sichtbarkeit: versteckt;
Rand: keiner;
Gliederung: keine;
Farbe: #409eff;
Cursor: Zeiger;
Hintergrundbild: URL(../image/eye.svg);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 12px;
Position: absolut;
oben: 10px;
links: 120px;
Anzeige: Inline-Block;
}Die restlichen Funktionen werden sukzessive verbessert... Dies ist das Ende dieses Artikels über die Verwendung von reinem JS zur Implementierung einiger Funktionen der Eingabekomponente in Element (schrittweise Verbesserung) und zur Kapselung in Komponenten. Weitere relevante JS-Inhalte zur Implementierung von Eingabekomponentenfunktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Optimierung des MySQL Thread_Stack-Verbindungsthreads
>>: Tutorial zur Installation von MySQL 5.6 mit RPM in CentOS
Artikel empfehlen
Kennen Sie die Bedeutung von Sonderzeichen in URLs?
1.# # stellt eine Position auf einer Webseite dar...
Lösung für „Spezialisierter Schlüssel war zu lang“ in MySQL
Inhaltsverzeichnis Lösung 1 Lösung 2 Beim Erstell...
Natives JS zum Erzielen eines funkelnden Sterneneffekts
In diesem Artikelbeispiel wird der spezifische Co...
Eine kurze Diskussion über die Ungültigkeitserklärung oder implizite Konvertierung von MySQL-Integer- und String-Indizes
Inhaltsverzeichnis Problemübersicht Reproduktion ...
Detaillierte Erklärung zu MySQL-Phantomlesevorgängen und wie man sie eliminiert
Inhaltsverzeichnis Transaktionsisolationsebene Wa...
Zusammenfassung einiger Punkte, die bei der Registrierung von Tomcat als Dienst zu beachten sind
Hier sind einige Punkte, die Sie bei der Registri...
JS implementiert einfachen Kalendereffekt
In diesem Artikel wird der spezifische JS-Code zu...
Der Interviewer fragte, wie man in CSS ein festes Seitenverhältnis erreicht
Möglicherweise hatten Sie für diese Frage bisher ...
Detaillierte Erläuterung der CentOS-Konfiguration der offiziellen Nginx-Yum-Quelle
Ich habe das von Alibaba Cloud gekaufte CentOS fü...
Detailliertes Beispiel zum Entfernen doppelter Daten in MySQL
Detailliertes Beispiel zum Entfernen doppelter Da...
Tiefgreifendes Verständnis der Erstellung und Implementierung von Servlets in Tomcat
1. Was ist ein Servlet 1.1. Erklären Sie in offiz...
Beispielcode zur Implementierung einer Hohlmaskenebene mit CSS
Inhalt dieses Artikels: Seitenhohlmaskenebene, Se...
Vue implementiert eine einfache bidirektionale Datenbindung
In diesem Artikelbeispiel wird der spezifische Co...
Spezifische Verwendung der MySQL-Segmentierungsfunktion substring()
Es gibt vier wichtige MySQL-Zeichenfolgenabfangfu...
Anweisungen zum Erlernen von Vue
Inhaltsverzeichnis 1. v-Text (v-Befehlsname = „Va...