Comment implémenter la fonction de cliquer sur un bouton pour copier du texte en JavaScript ?-js tutoriel-php.cn

Comment implémenter la fonction de cliquer sur un bouton pour copier du texte en JavaScript ?

WBOY

Libérer： 2023-10-20 18:31:41

original

1707 Les gens l'ont consulté

JavaScript 如何实现点击按钮复制文本功能？

JavaScript Comment implémenter la fonction de cliquer sur un bouton pour copier du texte ?

Dans les applications réseau modernes, nous rencontrons souvent des situations où nous devons copier du texte, comme copier des liens de partage, copier des codes de réduction, etc. JavaScript fournit un moyen simple et puissant d'atteindre cette fonction, c'est-à-dire en écoutant l'événement de clic du bouton et en appelant l'API du presse-papiers fournie par le navigateur pour copier le texte.

Tout d'abord, nous avons besoin d'un fichier HTML pour implémenter les boutons et les zones de texte. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>点击按钮复制文本</title>
</head>
<body>
    <input type="text" id="textToCopy" value="待复制的文本">
    <button id="copyButton">复制文本</button>
    <script src="script.js"></script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons créé une zone de texte et un bouton, et défini un identifiant pour chacun d'eux pour les opérations ultérieures.

Ensuite, nous devons écrire le code logique pour copier le texte dans le fichier JavaScript. Créez un fichier script.js et ajoutez le code suivant : script.js文件，并添加以下代码：

window.onload = function() {
    var copyButton = document.getElementById("copyButton");
    copyButton.addEventListener("click", function() {
        var textToCopy = document.getElementById("textToCopy");
        textToCopy.select();
        document.execCommand("copy");
        alert("已复制文本：" + textToCopy.value);
    });
};

Copier après la connexion

在上面的代码中，我们通过getElementById方法分别获取了按钮和文本框的引用，然后使用addEventListener方法监听按钮的点击事件。在点击事件的回调函数中，我们首先通过getElementById方法获取了待复制文本的引用，然后调用其中的select方法将文本框的文本内容选中，接着使用document.execCommand("copy")命令来执行复制操作，最后弹出一个提示框显示已复制的文本。

为了确保页面加载完成后再执行JavaScript代码，我们使用了上面代码中的window.onloadrrreee

Dans le code ci-dessus, nous avons obtenu les références au bouton et à la zone de texte respectivement via la méthode getElementById, puis utilisez la méthode addEventListener pour écouter les événements de clic sur le bouton. Dans la fonction de rappel de l'événement click, nous obtenons d'abord la référence au texte à copier via la méthode getElementById, puis appelons la méthode select pour sélectionner le contenu du texte de la zone de texte, puis utilisez la commande document.execCommand("copy") pour effectuer l'opération de copie, et enfin une boîte de dialogue apparaîtra pour afficher le texte copié.

Afin de garantir que le code JavaScript est exécuté après le chargement de la page, nous utilisons la méthode window.onload dans le code ci-dessus. De cette façon, lorsque la page sera chargée, le code JavaScript sera exécuté.

Maintenant, nous pouvons ouvrir le fichier HTML dans le navigateur et essayer de cliquer sur le bouton, puis de le coller ailleurs pour voir que le texte copié est livré avec succès. 🎜🎜Ce qui précède est un exemple de code spécifique utilisant JavaScript pour implémenter la fonction consistant à cliquer sur un bouton pour copier du texte. En écoutant l'événement de clic du bouton, en sélectionnant la zone de texte et en appelant l'API du presse-papiers fournie par le navigateur, nous pouvons facilement implémenter la fonction de copie de texte, permettant aux utilisateurs de partager et de copier du contenu plus facilement. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!