js implementiert einige Funktionen der Eingabekomponente in Element und kapselt sie in eine Komponente (Beispielcode)

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:
  • Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios
  • Detaillierte Analyse von Homologie und Domänenübergreifendkeit, JSONP (Funktionskapselung), CORS-Prinzip
  • Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten
  • Detaillierte Erläuterung der objektorientierten Praxis von JavaScript: Kapselung und Ziehen von Objekten
  • Native JS-Kapselung, nahtlose Karussellfunktion
  • Native JS-Kapselung vue Tab-Umschalteffekt
  • js implementiert eine einfache Methode zur Kapselung von jQuery und eine detaillierte Erklärung der Kettenoperationen
  • JavaScript implementiert ein Prototyp-Kapselungskarussell
  • Kapselungsmethode der JavaScript-Zeitlupenanimationsfunktion
  • JavaScript Canvas-Kapselung dynamische Uhr
  • Über Jacksons JSON-Tool-Klassenkapselung JsonUtils-Nutzung
  • Beispielcode für die JavaScript-Kapselung einer einfach verketteten Liste
  • Allgemeine Front-End-JavaScript-Methodenkapselung

<<:  Optimierung des MySQL Thread_Stack-Verbindungsthreads

>>:  Tutorial zur Installation von MySQL 5.6 mit RPM in CentOS

Artikel empfehlen

Der Unterschied zwischen Datenzeit und Zeitstempel in MySQL

In MySQL gibt es drei Datumstypen: Datum (Jahr-Mo...

Lösen Sie das Problem, dass auf VMware15 Centos7 Bridge-Modus SSH plötzlich nicht mehr zugegriffen werden kann

Da ich möchte, dass die virtuelle Maschine eine e...

Einführung in die Verwendung des Daten-URI-Schemas zum Einbetten von Bildern in Webseiten

Das Daten-URI-Schema ermöglicht es uns, Daten mith...

Lösung für die Willkommensmeldung im Notfallmodus beim Booten von CentOS7.4

Heute habe ich eine virtuelle Maschine für ein Ex...

Beispiele für die Verwendung von MySQL-Abdeckungsindizes

Was ist ein Deckungsindex? Das Erstellen eines In...

Vue implementiert eine kleine Countdown-Funktion

In vielen Projekten muss eine Countdown-Funktion ...

Analyse von 2 Token-Gründen und Beispielcode in der Webprojektentwicklung

Inhaltsverzeichnis Frage: Es gibt 2 Token im Proj...

Benutzerdefinierter Vue-V-HAS-Befehl zum Implementieren der Schaltflächenberechtigungsbeurteilung

Anwendungsszenario Am Beispiel des Hintergrundver...

Detaillierte Einführung in die Linux-Hostnamenkonfiguration

Inhaltsverzeichnis 1. Konfigurieren Sie den Linux...

Zusammenfassung der vier Möglichkeiten zur Einführung von CSS (Sharing)

1. Inline-Referenz: Wird direkt auf dem Etikett v...

vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus

In diesem Artikelbeispiel wird der spezifische Co...

Vor- und Nachteile von Vite und Vue CLI

Es gibt im Vue-Ökosystem ein neues Build-Tool nam...

Einige Tipps zur Verwendung von Less in Vue-Projekten

Inhaltsverzeichnis Vorwort 1. Stildurchdringung 1...

MySql-Freigabe der Nullfunktionsnutzung

Funktionen zu Null in MySql IFNULL ISNULL NULLIF ...

So bedienen Sie Docker und Images

Spiegel finden Wir können auf der Docker Hub-Webs...