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

Installationsprozess von MySQL5.7.22 auf dem Mac

Eine kurze Diskussion zum Problem, dass der Text in der Schaltfläche im Kompatibilitätsmodus des Browsers nicht vertikal zentriert ist

XML/HTML-CodeInhalt in die Zwischenablage kopiere...

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

Installationsprozess von MySQL5.7.22 auf dem Mac

Webdesign-Tutorial (6): Behalte deine Leidenschaft für Design

Detailliertes Tutorial zum Ersetzen von mysql8.0.17 in Windows 10

Eine kurze Einführung in React

Prinzipielle Beispiele für die vier Netzwerktypen von Docker

Neue Einstellungen für Text und Schriftarten in CSS3

Docker erstellt die Codeerkennungsplattform SonarQube und erkennt den Prozess von Maven-Projekten

Einfache Implementierung von Mysql-Anweisungen zum Hinzufügen, Löschen, Ändern und Abfragen

Untersuchung der MySQL-Paging-Leistung

Beispiel zum Erstellen eines lokalen Benutzers in MySQL und Erteilen von Datenbankberechtigungen

Artikel empfehlen

Native JS-Drag-and-Drop-Funktion zum Erstellen eines Slider-Beispielcodes

SQL-Aggregation, Gruppierung und Sortierung

TinyEditor ist ein einfacher und benutzerfreundlicher HTML-WYSIWYG-Editor

HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts

MySQL-Fremdschlüsseleinschränkung (FOREIGN KEY) Fallerklärung

Beispiel und Update für die Erstellung von HTML5+CSS3-Headern

Python schreibt die Ausgabe in den CSV-Vorgang

Vollständiger Schrittbericht zur Vue-Kapselung allgemeiner Tabellenkomponenten

MySql implementiert die Seitenabfragefunktion

CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft

Dieser Artikel hilft Ihnen beim Einstieg und beim Verständnis der grundlegenden Vorgänge von JQuery

Eine kurze Diskussion zum Problem, dass der Text in der Schaltfläche im Kompatibilitätsmodus des Browsers nicht vertikal zentriert ist

Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen

Eine kurze Diskussion über Shallow Copy und Deep Copy in JavaScript

Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server