JavaScript-Projekt: In Zwischenablage kopieren

1. Einführung: Jeder in diesem Kurs wird mit JavaScript ein Projekt erstellen und in ein Clipbot-Projekt kopieren Sie können also den gesamten Text, der in dieses Eingabefeld geschrieben ist, kopieren , indem Sie einfach auf dieses Symbol klicken Wenn ich also auf dieses Symbol klicke, wird mein Text kopiert , der in dieses Eingabefeld geschrieben wird. Ich schreibe einige andere Texte wie so etwas und dann klicke ich auf dieses Symbol, und dann wird dieser Text kopiert , der in dieses Eingabefeld geschrieben wird. Wenn ich ihn jetzt einfügen möchte, füge ich ihn hier ein, sodass er eingefügt wird, weil er in meine Zwischenablage kopiert wurde , als ich auf diese Schaltfläche klicke Lassen Sie uns im nächsten Video lernen, wie man ein solches Projekt mit JavaScript erstellt nächsten Video lernen, wie man ein solches Projekt mit JavaScript 2. SET-UP: In diesem Video werden wir das Setup für unser Projekt vornehmen. Für das Symbol bedeutet das, dass wir in unserem Projekt ein Symbol zum Kopieren in die Zwischenablage verwenden in unserem Projekt ein Symbol zum Kopieren in die Zwischenablage Weil Icon bedeutet, das Icon zu bekommen, werden wir diese Website verwenden Diese Website fontawesome.com. Sie können diese Website besuchen und auf diese Startschaltfläche klicken . Nachdem Sie auf diese Startschaltfläche geklickt haben, wird Und hier können Sie Ihre E-Mail-Adresse angeben und auf diesen Sand Kit-Einbettungscode klicken . Sie erhalten einen CDN-Link in Ihrer E-Mail-Adresse, um Font Awesome mit Ihrer Website zu verbinden Font Awesome mit Ihrer Website Aber wenn Sie Ihre E-Mail-Adresse nicht angeben möchten, was ich nicht angeben möchte, ist das sehr schwierig Es ist nicht schwierig. Es ist ein sehr langer Prozess. Wenn Sie also Ihre E-Mail-Adresse und alles andere nicht teilen möchten, können Sie einfach nach CDN Js suchen und diese Website öffnen In diesem Suchfeld können Sie nach Font suchen. Awesome bedeutet, dass Sie nach dem Namen der Website suchen können Ihr Seitenname ist font dosome. Geben Sie hier font awesome ein und klicken Sie auf diese Schriftart Awesome Von hier aus müssen Sie auf diese Copy Link-Technologie klicken. Klicken Sie darauf und Ihr Link-Tag wird mit Ihrem CDN-Link kopiert . Öffnen Sie einfach Ihren Codator und in Ihren Codator Aber jetzt haben wir das Einfügen gewonnen. Wir werden unseren Htmal-Code schreiben und in diesen HTML-Code werden wir diesen Link einfügen Wie Sie sehen können, habe ich einen Ordner erstellt, der Ordnername lautet In die Zwischenablage kopieren In diesem Ordner habe ich drei Dateien erstellt JavaScript-Datei, HTML-Datei und CSS-Datei Sie müssen auch diese JavaScript-Datei, -Datei und CSS-Datei erstellen . Der Name der Dateien kann beliebig sein, aber die Erweiterung sollte jthtml CSS sein Öffnen Sie dann Ihre HTML-Datei und in dieser HTML-Datei müssen Sie eine HTML-Boilerplate erstellen Um eine HTML-Boilerplate zu erstellen, klicken Sie einfach auf das Ausrufezeichen und geben Sie ein , dass Ihr Boilerplate erstellt wird. In diese, nicht in und unter dieser Metatechnik, können Sie Ihren Link einfügen, den Sie kopiert haben Nachdem ich ihn eingefügt habe, klicke ich auf A G, um ihn zu verpacken. Nachdem Sie auf Strg V geklickt haben, erhalten Sie diesen Link. Und von wo wir diesen Link haben, haben wir diesen Link von hier. Klicken Sie einfach auf diese Copy-Link-Technologie und Sie erhalten diese Link-Technologie und innerhalb der Link-Technologie wird der CDN-Link auch so angezeigt Jetzt verknüpfen wir unsere CSS- und JavaScript-Datei mit Link-CSS Gehen Sie einfach unter dieses Titeldeck und erstellen Sie eine Link-Technologie und klicken Sie auf diese Linkspalte CSS und in der HRF müssen Sie den CSS-Dateinamen schreiben Der Name unserer CSS-Datei ist Styloid CSS und in der HRF es Styloid CSS geschrieben. Ich repariere das. In diesem HRF ist es CSS im Stil geschrieben. Jetzt werde ich diese HTML-Datei mit unserer JavaScript-Datei verbinden, um unsere HTML-Datei mit der JavaScript-Datei Ich muss ein Script-Tag in dieser Bodytech erstellen, einfach ein Skript schreiben und SRC aufrufen In diesem SRC musst du die JavaScript-Datei schreiben, unsere JavaScript-Datei ist Abt Ich habe hier bei Js geschrieben. Jetzt sind unser CSS und unser JavaScript mit unserem HTML verknüpft, und wir haben erfolgreich einen CDN-Link für Fondosm generiert und können jetzt die Icons von Fondos verwenden Das ist es für das Setup-Video. Lassen Sie uns nun im nächsten Video HTML-Code schreiben. 3. HTML: Jeder in diesem Video, wir werden unseren HTML-Code für unser Projekt schreiben. Was wir in unseren HTML-Code schreiben werden , dafür müssen wir in unserem endgültigen Projekt überprüfen. Dies ist unser letztes Projekt , das wir erstellen werden , und in unserem HTML müssen wir zuerst diesen blauen Hintergrund erstellen. Dieser blaue Hintergrund ist ein Container. Ich werde die Diff-Technologie für diesen Container erstellen und in diesem Container wird es ein Eingabefeld geben. Wie Sie sehen können, haben wir hier etwas Text geschrieben, dieser Text wird in das Eingabefeld geschrieben und um ein Eingabefeld zu erstellen, müssen wir die Eingabetechnologie verwenden. Wir erstellen Eingabe-Technologie in diesem Dif-Container und dann erstellen wir ein Button-Teck und innerhalb dieser Button-Technologie anstelle von Text werden wir dieses Symbol verwenden Lass uns das bauen bedeutet, dass wir die Struktur unseres Projekts in unserem HTML erstellen , also öffne ich meinen Codator und diesen Codator Wie Sie sehen können, habe ich meine HTML-Datei bereits geöffnet und in dieser HTML-Datei werde ich in diese Body-Technologie und in diese Body-Technologie gehen . Als Erstes werde ich at erstellen, um ein kontinuierliches Dif zu erstellen, ich kann einfach dif schreiben und ich kann met verwenden, um es zu verwenden. Da ich mit Met ein Dif mit dem Klassennamen Container erstellen möchte , kann ich hier deft container, TIN, TIN schreiben. Wenn ich auf Enter klicke, erhalte ich ein Diff-Tag mit einer Containerklasse In dieser Diff-Technologie erstelle ich einen. Was ich erstellen werde, muss ich überprüfen. Ich werde ein Eingabefeld erstellen, um ein Eingabefeld zu erstellen, muss ich ein Eingabe-Tag schreiben. In diesem Eingabe-Tag wird der Typ Text sein. Wie Sie sehen können, gibt es einen Standardwert. Der Standardwert ist, dass dieser Text kopiert wird. Was bedeutet der Wert Bdefault? Obwohl ich diese Seite neu lade, werde ich etwas Text entfernen, und obwohl ich diese Seite neu lade, erhalte ich wieder den Standardtext . Das heißt, um diesen Standardtext zu erstellen, müssen Sie diesen Text innerhalb des Werts des Eingabetextes schreiben des Sie müssen ein Attribut erstellen, Name des Dt-Attributs wird der Wert sein und innerhalb dieses Werts werden Sie schreiben, dass dieser Text kopiert wird Jetzt werden Sie bekommen, dass dieser Text standardmäßig kopiert wird. Jetzt erstelle ich unter diesem Eingabetext einen Button Tech, einfach einen Button schreiben. In dieser Button-Technologie erstelle ich ein Symbol. Da wir die Schrift dosoMT create icon verwenden, müssen Sie Tech eingeben Im Klassenthema dieses Symbols finden Sie den Klassennamen dieses Symbols auf der Font Dosme-Website Aber ich kenne den Klassennamen dieses Symbols. Der Klassenname dieses Symbols ist sehr solide, weit kopiert und dann hat er die Größe des Symbols. Ich gebe einfach class ein und die Klasse ist f dash solid und dann far dy, so far ds copy. Dann beträgt die Größe des Icons zwei X. Jetzt speichern wir es und speichern es in unserem Browser. Ich klicke auf Mit Live-Server öffnen. Wie Sie jetzt sehen können, erhalten wir unsere Struktur, was bedeutet, dass wir unser Eingabefeld erhalten, und es gibt einen Standardtext in diesem Eingabefeld, und dann erhalten wir eine Schaltfläche mit dem Symbol „Kopieren“, um auf „Einfügen“ zu klicken Das ist es für unser HTML-Video. Lassen Sie uns nun CSS-Code in unserem nächsten Video schreiben. 4. Hinzufügen von Styling: In diesem Video werden wir CSS-Code für unser Projekt schreiben, um diesem Projekt Styling hinzuzufügen. Nachdem Schreiben von CSS-Code Styling-Mittel hinzugefügt haben, wird unser Projekt so aussehen. Lassen Sie uns diesem Projekt etwas Styling hinzufügen, um das Styling hinzuzufügen Ich öffne meinen Codator und in diesem Codator habe ich bereits meine Style-CSS-Datei geöffnet und in dieser Datei füge ich etwas CSS füge ich Also als Erstes werde ich diesen Inhalt in den Mittelpunkt stellen, stellen weil dieser Inhalt in der Mitte steht, also werde ich diesen Inhalt in die Mitte bringen und dann werde ich die Schriftfamilie ändern Fangen wir an, etwas Styling hinzuzufügen. Zuallererst werde ich das in den Mittelpunkt stellen. Um das in den Mittelpunkt zu rücken, wähle ich einfach meine Körpertechnologie aus. In diese Bodytech schreibe ich Display-Flex. Das heißt, ich werde Flexboox verwenden um diesen Inhalt in den Mittelpunkt zu rücken Um Flexbox zu verwenden, müssen Sie also Display-Flex schreiben und dann können Sie die Flex-Richtung definieren Also definiere ich die Flex-Richtung oder Sie müssen die Flex-Richtung nicht definieren Im Moment werde ich nicht definieren. Wenn es nötig ist, definiere nur ich die Flex-Richtung. Fügen wir nun das Justify Content Center hinzu. Begründen Sie also das Inhaltszentrum. Durch diese Option zum Ausrichten des Inhaltszentrums wird unser Inhalt horizontal in die Mitte gebracht unser Inhalt horizontal in , und um unseren Inhalt vertikal in die Mitte zu bringen, müssen Sie Align item center verwenden. Diese Linienmitte bringt unseren Inhalt vertikal in die Mitte Da wir unseren Inhalt vertikal in die Mitte bringen, müssen wir eine Höhe definieren Um die Höhe zu definieren, schreibe ich Höhe und die Höhe beträgt 100 Vg. Ich schätze, du weißt schon, was 100 Vg bedeutet, 50 er, aber dann zeige ich dir auch, dass 100 Vg die ganze Seite bedeuten. Jetzt bringen wir diesen Inhalt in die Mitte. 100 g bedeutet, dass wir diesen Inhalt in die Mitte dieser ganzen Seite bringen wollen . Bedeutet, dass dies das Zentrum ist. Jetzt steht unser Inhalt im Mittelpunkt. Jetzt ändere ich die Schriftfamilie. Die Schriftfamilie ist zuallererst Schriftfamilie und die Schriftfamilie ist Aerial. Diese Helvatka und Serife aus der Luft, also lasst uns jetzt in unserem Rouser weiterentwickeln, wie es aussieht, und jetzt, wo es richtig aussieht, bedeutet unser Inhalt jetzt Nun, was ich jetzt tun werde, ich füge diese blaue Farbe Um also unserem Continuer Diff blaue Farbe hinzuzufügen , müssen Sie im Hintergrund diesen Continuer Dip auswählen Der Klassenname des Dif war Container, deshalb habe ich die Klasse ausgewählt Also Container, U und TEI und dein Container in den geschweiften Klammern, ich füge die Hintergrundfarbe Also Hintergrundfarbe. Und die Hex-Codes der Hintergrundfarben, äh, 4075 EF, 4075 Lassen Sie uns jetzt etwas Polsterung in unserer Hintergrundfarbe hinzufügen. Warum wir Polsterung hinzufügen, wir fügen Polsterung hinzu, weil wir diese Hintergrundfarbe von innen etwas größer machen wollen diese Hintergrundfarbe von innen etwas größer Um unsere Hintergrundfarbe zu vergrößern, wir eine Polsterung hinzu, und die Polsterung wird Lass uns speichern und schauen wir in unserem Browser an, wie es Wie Sie sehen können, ist dies nicht das Projekt, an dem Sie gerade arbeiten. Wir arbeiten an diesem Projekt. Wie Sie sehen können, haben wir jetzt diesen blauen Hintergrund, aber die Ränder sind nicht abgerundet. Um die Grenzen abzurunden, können Sie die Eigenschaft ym border radius, il type des radius verwenden il type des radius Und der Grenzradius wird acht Pixel betragen. Lassen Sie uns nun einen Blick in unseren Browser werfen. Jetzt sieht es richtig aus. Jetzt sieht es einfach so aus, schätze ich, es sieht selbst so aus. Jetzt müssen wir dieses Eingabefeld ein bisschen groß machen , so wie dieses Eingabefeld groß ist. Das heißt, wir haben diesem Eingabefeld etwas Auffüllung hinzugefügt . Lass uns das machen Jetzt füge ich das Styling in das Eingabefeld ein. Ich wähle die Eingabe aus und ich wähle speziell diesen Texttyp aus, weil ich diesem Textbereich des Eingabefeldes einen Stil hinzufügen möchte . Also kopiere ich diesen Typtext, und ich muss eckige Klammern erstellen und innerhalb eckiger Klammern kann ich Text schreiben. Und jetzt fügen wir dem eine Polsterung hinzu. Warum wir Polsterung hinzufügen. Wir fügen Polsterung hinzu, weil wir es groß machen wollen Padding und Padding werden also 20 Pixel betragen. Sagen wir also und schauen wir uns in unserem Browser an, wie es Es funktioniert oder nicht. Also ja , wie du siehst, sieht das jetzt fast ähnlich aus. Jetzt muss ich die Schriftfamilie dieses Textes vergrößern, nicht die Schriftfamilie dieses Textes, um die Schriftgröße zu erhöhen Ich kann Schriftgröße eingeben und die Schriftgröße dieses Textes beträgt 16 Pixel. Jetzt füge ich den rechten Rand hinzu. Warum ich ISU hinzufüge. Lass uns einen Blick in unserem Browser speichern. Wir fügen den rechten Rand hinzu, weil zwischen dieser Schaltfläche und diesem Eingabefeld kein Leerzeichen ist zwischen dieser Schaltfläche und diesem Eingabefeld kein Leerzeichen Um etwas Abstand zwischen dieser Schaltfläche und dem Eingabefeld zu schaffen, fügen wir rechts einen Rand hinzu. Jetzt gebe ich Margin Right ein. Und der rechte Rand wird zehn Pixel betragen und wir müssen den Rand aus dieser Eingabe entfernen. Um die Ränder zu entfernen, können Sie einfach border nun eingeben. Dann wird es keinen Rahmen geben, gib Grenze ein und dann keinen. Lassen Sie uns jetzt in unserem Router nachschauen, wie es aussieht. Wie Sie sehen können, sieht es jetzt fast genauso aus, aber wir müssen diesen Button stylen. Um diesen Button zu stylen, wähle ich diesen Button Tech Button aus. In dieser Button-Technologie möchte ich die Größe dieses Symbols erhöhen, möchte ich die Größe dieses Symbols erhöhen um die Größe dieses Symbols zu erhöhen Ich füge eine Polsterung hinzu und die Polsterung beträgt zehn Pixel Und die Hintergrundfarbe der Schaltfläche wird transparent sein , da es, wie Sie sehen können, eine gewisse Hintergrundfarbe gibt wie Sie sehen können, eine gewisse Hintergrundfarbe Diese Hintergrundfarbe ist da. Um diese Hintergrundfarbe der Schaltfläche zu entfernen, können Sie also Hintergrundfarbe (transparente Hintergrundfarbe) eingeben , und die Hintergrundfarbe wird transparent sein. Schauen wir uns jetzt in unserem Browser um. Wie Sie jetzt sehen können, wurde die Hintergrundfarbe entfernt, aber es gibt einen gewissen Rand. Um jetzt Rahmen zu entfernen, können Sie Rahmen, None so border und dann none eingeben. Nehmen wir nun an, schauen wir in unserem Browser nach. Wie Sie nun sehen können, sieht unser Eingabefeld äh, ein bisschen ähnlich aus. Aber was wir jetzt tun müssen, ist die Größe des Symbols zu erhöhen, und wir müssen das Symbol weiß färben und wir müssen dieses Symbol in der Mitte ausrichten . Lass uns das machen. Zuerst füge ich dem Symbol die Farbe hinzu , um die Farbe hinzuzufügen Ich gebe einfach Farbe ein und die Farbe ist weiß. Und um das Symbol in der Mitte auszurichten, kann ich vertikal ausrichten in der Mitte eingeben. Es gibt eine Eigenschaft mit dem Namen vertical align, die unser Element vertikal und vertikal an der die unser Element vertikal und vertikal an Stelle ausrichtet, an der wir es ausrichten möchten Wir möchten es in der Mitte ausrichten, sodass Sie Mitte eingeben können. Wenn wir das nun überprüfen, können Sie sehen, dass es in der Mitte ausgerichtet ist , was bedeutet, dass das Symbol in der Mitte dieses Containers ausgerichtet ist . Jetzt müssen wir die Schriftgröße dieses Symbols erhöhen , um die Schriftgröße zu erhöhen Sie können die Schriftgröße eingeben. Und die Schriftgröße wird 16 Pixel betragen. Wenn du jetzt in unseren Hosenrock schaust, kannst du sehen, dass er ein bisschen größer aussieht , einfach so aussieht Jetzt können Sie sehen, dass es auf dieser Seite eine Bildlaufleiste gibt, aber auf dieser Seite gibt es keine Bildlaufleiste Warum gibt es eine Bildlaufleiste In unserem aktuellen Projekt gibt es eine Bildlaufleiste , weil wir in unserem Körper keinen Rand Null hinzugefügt haben. Wenn Sie Ihrem Textkörper einen Nullrand hinzufügen, wird die Bildlaufleiste entfernt. Rand Null. Jetzt speichern wir und schauen in unserem Browser nach. Wie Sie nun sehen können, wurde unsere Bildlaufleiste aus diesem Projekt entfernt. Warum wir in diesem Projekt Rand Null hinzugefügt haben, wir haben Rand Null hinzugefügt, weil CSS dieser Seite standardmäßig einen gewissen Rand einräumt und wir aufgrund dieses Randes diese Bildlaufleiste bekommen haben. Wenn wir nun diesen Rand entfernen, gibt es standardmäßig keine Bildlaufleiste. Jetzt müssen wir wohl etwas Hefe hinzufügen. In diesem Symbol gibt es einen Hover-Effekt. Und es gibt keinen How-Effekt. Um ihren Effekt hinzuzufügen, muss ich diese Schaltfläche auswählen Und innerhalb dieser Schaltfläche füge ich den Ho-Effekt hinzu , deshalb wähle ich die Schaltfläche aus. Und um dann den H-Effekt hinzuzufügen, geben Sie einfach Doppelpunkt ein und bewegen Sie den Mauszeiger Was möchten Sie also tun, wenn wir den Mauszeiger über diese Schaltfläche bewegen? wir den Mauszeiger über diese Schaltfläche Wir möchten die Hintergrundfarbe ändern Kopieren Sie also einfach diese Hintergrundfarbe und machen Sie sie etwas heller Steuerung C und Steuerung V. Ich gebe den Hex-Code dieser Farbe selbst ein. Der Hexadezimalcode dieser Farbe lautet drei, doppelt 59, drei, fünf, doppelt neun. Schauen wir uns jetzt in unserem Browser um. Wenn ich jetzt mit der Maus über dieses Symbol fahre, gibt es einen Hover-Effekt. Wenn ich mit der Maus darüber fahre, gibt es einen Randradius, was bedeutet, dass die Um diese Ränder abzurunden, können Sie einfach einen Randradius in dieser Schaltfläche hinzufügen Fügen Sie also einfach den Grenzradius hinzu. Und der Grenzradius wird vier Pixel betragen. Also jetzt speichern wir und schauen wir in unserem Browser nach. Wenn ich das jetzt übertreibe, hat der Hintergrund einige abgerundete Ecken, genau wie bei unserem endgültigen Projekt. Okay, das war also unser letztes Projekt, und das ist unser aktuelles Projekt, an dem wir arbeiten. Also lass uns das jetzt überprüfen. Also das hat auch einen Randradius in dieser Hintergrundfarbe, und das hat auch einen Randradius in dieser Hintergrundfarbe. Das ist es für dieses Video. Lassen Sie uns jetzt JavaScript hinzufügen 5. Javascript: Jetzt werden wir JavaScript-Code für dieses Projekt schreiben . Warum schreiben wir also JavaScript-Code? Wir schreiben JavaScript-Code , denn wenn ich auf diese Schaltfläche klicke, passiert nichts. Bedeutet, dass dieser Text, der in dieses Eingabefeld geschrieben ist , nicht kopiert wird. Welche Funktionalität soll ich hinzufügen, um diese Funktionalität hinzuzufügen? Wenn ich auf diese Schaltfläche klicke, möchte ich den Text kopieren , der in das Eingabefeld geschrieben ist. Um diese Funktionalität hinzuzufügen, werde ich JavaScript-Code schreiben. Lassen Sie uns nun lernen, wie Sie diese Art von Funktionalität mithilfe von JavaScript hinzufügen können. Ich öffne meinen Codator und ich öffne meine JavaScript-Datei. In dieser JavaScript-Datei werde ich eine Funktion erstellen Funktion und Name dieser Funktion werden Kopiertext sein. Und was wir jetzt kopieren wollen, wir wollen den Wert des Eingabefeldes kopieren , was ist der Wert des Eingabefeldes? Was auch immer wir in dieses Eingabefeld schreiben , es wird der Wert sein. Um also den Text zu kopieren , der in das Eingabefeld geschrieben ist, müssen wir dieses Eingabefeld auswählen, um das Eingabefeld Ich erstelle eine Variable und der Variablenname wird eingegeben. Und um das auszuwählen, verwende ich den Document Dot Query Selector, Document Dot Query Selector und das Tag onm. Wie lautet der technische Name Das Tegame ist Eingabe, geben Sie Eingabe ein. Um nun den Text zu kopieren , der in die Eingabedatei geschrieben ist , erhalten wir eine Methode Der Methodenname lautet Navigator Dot ClipBortText. Schreiben Sie einfach Navigator Dot Clipboard . Punkttext. Dies ist der Methodenname und jetzt erstellen Sie diese Klammern und innerhalb dieser Klammer müssen Sie definieren, was Sie kopieren möchten. Was wir mit dieser Methode kopieren wollen, dass diese Methode den Eingabewert kopiert. Was ist der Text, den wir in das Eingabefeld schreiben werden , ist der Wert. Wir möchten also, dass diese Methode den Eingabewert kopiert. Geben Sie Eingabe ein, während wir Eingabe eingeben, geben wir Eingabe ein, weil der Variablenname, für den wir Eingabe zehn ausgewählt haben, Eingabe ist. Wenn der Variablenname etwas anderes wäre, werden wir dieses etwas anderes hier schreiben. Und was wir jetzt auswählen wollen, wir wollen den Wert dieses Eingabefeldes auswählen. Geben Sie also einfach den Eingabepunktwert ein. Und jetzt wählt diese Methode den Wert dieses Eingabefeldes aus. Jetzt müssen wir definieren, wann wir diese Funktion aufrufen wollen. Wir wollen diese Funktion aufrufen , wenn wir auf diese Schaltfläche klicken. Wählen wir also diese Schaltfläche in diesem JavaScript aus. Um auszuwählen, erstelle ich eine Variable, der Variablenname ist Btn dann gebe ich document dot query selector ein, also document dot query selector, und was wir auswählen möchten, wir wollen Button Tech auswählen, also geben Sie einfach den Tag-Namen ein, der Tag-Name der Variablenname ist Btn, dann gebe ich document dot query selector ein, also document dot query selector, und was wir auswählen möchten, wir wollen Button Tech auswählen, also geben Sie einfach den Tag-Namen ein, der Tag-Name ist button. Und was wir jetzt tun wollen, wir wollen diese Funktion aufrufen, wenn wir auf diese Schaltfläche klicken zu tun, müssen Sie in dieser Button-Technologie sogar einen Listener hinzufügen in dieser Button-Technologie sogar einen Listener Wählen Sie also einfach diese Variable aus und geben dann einfach btnt add even listener Und dann, welches Ereignis diese Schaltfläche abhört, das Ereignis, das diese Schaltfläche abhört, ist Klickereignis, was bedeutet, dass wir eine Funktion aufrufen wollen, wenn wir auf diese Schaltfläche klicken bedeutet, dass wir eine Funktion aufrufen wollen wenn wir Geben Sie also einfach click und dann den Namen der Funktion ein, die Sie aufrufen möchten, wenn auf diese Schaltfläche geklickt wird Der Funktionsname, den wir aufrufen möchten, wenn auf diese Schaltfläche geklickt wird , ist diese Funktion zum Kopieren von Text Also kopiere das einfach und füge es hier ein. Jetzt speichern wir und schauen wir in unserem Browser nach, also speichere ich das und alle Dateien, die ich speichern werde, und schauen wir uns das jetzt in unserem Browser an. Das ist das Projekt, das heißt, das war das endgültige Projekt, und das ist das Projekt, an dem wir gerade arbeiten. Also werde ich hier etwas Text eingeben. Also, was auch immer ich eingeben kann, und ich klicke auf diese Schaltfläche oder ich klicke auf dieses Symbol und ich entferne es und füge es hier ein, einfach mit der rechten Maustaste klicken und auf dieses Einfügen klicken. Jetzt können Sie sehen, dass es sich um geschriebenen Kopiertext handelt. Ich werde noch einmal etwas tun und erneut auf diese Schaltfläche klicken. Und dann entferne ich das und klicke auf Control V. Das funktioniert nicht. Warum funktioniert das nicht? Lass uns nachschauen. Der Fehler war, dass wir diese Methode falsch geschrieben haben . Was haben wir falsch geschrieben? Wir sollten Text mit Punkt R auf der Navigationstafel schreiben auch Text eingeben. Das ist der Methodenname. Wenn wir jetzt speichern und unseren Browser öffnen und das überprüfen, klicke ich darauf und füge es ein. Control V. Jetzt funktioniert es. Ich gebe etwas anderes ein und klicke darauf. Ich entferne es und füge es wieder ein. Jetzt funktioniert es. Jetzt gebe ich wieder etwas anderes ein, ich tippe und klicke auf diese Schaltfläche und jetzt entferne ich sie und ich klicke mit der rechten Maustaste und dann auf diese Schaltfläche Einfügen. Wie Sie sehen können, funktioniert das und das ist es für dieses Video für diesen Kurs Wir haben diese Funktion zum Kopieren in Text erstellt, und ich hoffe, Ihnen gefällt dieser Kurs.