Maison >interface Web >js tutoriel >Comment implémenter la fonction copier-coller en javaScript
Comment implémenter la fonction copier-coller en javaScript
- 藏色散人original
- 2021-11-18 15:51:413257parcourir
Comment implémenter la fonction copier-coller en javaScript : 1. Via la méthode "document.execCommand('copy')" ; 2. Via ClipboardJS pour copier le contenu.
L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.
Comment implémenter la fonction copier-coller en javaScript ?
Deux méthodes pour implémenter le copier-coller dans js
1. Préface
L'interface a besoin de la fonction de copie, j'en ai donc écrit une comme un simple enregistrement
2. Méthode, la seconde est recommandée.
1. La première méthode
1), via document.execCommand('copy')
2), le code front-end est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
</head>
<body>
<button onclick="copyText('copy_file')">点我复制</button>
<a id="copy_file" href="复制内容" ></a>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
function copyText(str_file) {
const btn = document.querySelector('.'+str_file);
var copy_val = document.getElementById(str_file)
var copy_file = copy_val.getAttribute("href");
btn.addEventListener('click',() => {
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', copy_file);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
swal("复制成功！","success");
}
document.body.removeChild(input);
})
}
</script>
</body>3), résumé : copiez principalement la balise a via la classe et id href, placez le contenu copié dans la balise d'entrée générée, puis supprimez la balise d'entrée après la copie. Vous pouvez copier le contenu pour l'utiliser vous-même et modifier le js.
4), problème : le premier clic ne prend pas effet et doit être cliqué deux fois, ce qui n'est pas encore résolu
2, la deuxième méthode
1), utilisez ClipboardJS pour copier le contenu, recommandé ceci
2 ), adresse git : clipboardjs (https://clipboardjs.com/)
3), le code front-end est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 请自行去git项目下载 js-->
<script src="./clipboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
<button id="btn" data-clipboard-text="str_555" onclick="copyText()">
<span>Copy</span>
</button>
</body>
</html>
<script>
function copyText() {
var btn = document.getElementById('btn');
console.log(btn);
var clipboard = new ClipboardJS(btn);
<!-- var clipboard = new ClipboardJS(btn, {-->
<!-- container: document.getElementById('btn')-->
<!-- });--> 如果你的项目是 bootstrap框架，请使用这个
clipboard.on('success', function(e) {
console.log(e);
swal("复制成功！","success");
clipboard.destroy();
});
clipboard.on('error', function(e) {
console.log(e);
swal("复制失败","error");
clipboard.destroy();
});
}
</script>3), résumé : Veuillez lire attentivement le document. Ce projet est toujours très puissant et je le recommande vivement.
4) Problème : J'ai également rencontré le problème que la première copie n'a pas pris effet, qui n'a pas été résolu pour le moment.
3. Résumé
1. Nous avons tous rencontré le problème que la première copie n'a pas pris effet, et nous avons utilisé sweetalert pour résoudre le problème plus tard.
2. Je n'ai expérimenté qu'avec les navigateurs Google et Firefox, et ils peuvent être utilisés. Si d'autres versions de navigateur ne peuvent pas être utilisées, veuillez consulter les autres articles par vous-même.
Apprentissage recommandé : "Tutoriel sur les bases de JavaScript"
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!