So implementieren Sie die Kopier- und Einfügefunktion in JavaScript-js-Tutorial-php.cn

So implementieren Sie die Kopier- und Einfügefunktion in JavaScript

藏色散人

Freigeben： 2021-11-18 15:51:41

Original

3248 Leute haben es durchsucht

So implementieren Sie die Kopier- und Einfügefunktion in JavaScript: 1. Über die Methode „document.execCommand('copy')“ 2. Über ClipboardJS, um den Inhalt zu kopieren.

So implementieren Sie die Kopier- und Einfügefunktion in JavaScript

Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wie implementiert man die Kopier- und Einfügefunktion in JavaScript?

Zwei Methoden zum Implementieren von Kopieren und Einfügen in js

1. Vorwort

Die Schnittstelle benötigt die Kopierfunktion, daher habe ich eine als einfachen Datensatz geschrieben

2. Methode, die zweite wird empfohlen.

1. Die erste Methode

1) über document.execCommand('copy')

2) lautet der Front-End-Code wie folgt:

<!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(&#39;copy_file&#39;)">点我复制</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(&#39;.&#39;+str_file);
 var copy_val = document.getElementById(str_file)
 var copy_file = copy_val.getAttribute("href");
 btn.addEventListener(&#39;click&#39;,() => {
  const input = document.createElement(&#39;input&#39;);
  document.body.appendChild(input);
  input.setAttribute(&#39;value&#39;, copy_file);
  input.select();
  if (document.execCommand(&#39;copy&#39;)) {
   document.execCommand(&#39;copy&#39;);
   swal("复制成功！","success");
  }
  document.body.removeChild(input);
 })
}
 
</script>
</body>

Nach dem Login kopieren

3), Zusammenfassung: Kopieren Sie hauptsächlich das a-Tag durch die Klasse und id href, fügen Sie den kopierten Inhalt in das generierte Eingabe-Tag ein und entfernen Sie das Eingabe-Tag nach dem Kopieren. Sie können den Inhalt kopieren, um ihn selbst zu verwenden, und die js ändern.

4), Problem: Der erste Klick wird nicht wirksam und muss zweimal angeklickt werden, was noch nicht gelöst ist

2, die zweite Methode

1), ClipboardJS zum Kopieren des Inhalts verwenden, dies wird empfohlen

2 ), Git-Adresse: Clipboardjs (https://clipboardjs.com/)

3), der Front-End-Code lautet wie folgt:

<!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(&#39;btn&#39;);
 console.log(btn);
  var clipboard = new ClipboardJS(btn);
<!--  var clipboard = new ClipboardJS(btn, {-->
<!--   container: document.getElementById(&#39;btn&#39;)-->
<!--  });--> 如果你的项目是 bootstrap框架，请使用这个
  clipboard.on(&#39;success&#39;, function(e) {
   console.log(e);
   swal("复制成功！","success");
   clipboard.destroy();
  });
 
  clipboard.on(&#39;error&#39;, function(e) {
   console.log(e);
   swal("复制失败","error");
   clipboard.destroy();
  });
}
</script>

Nach dem Login kopieren

3), Zusammenfassung: Bitte lesen Sie das Dokument sorgfältig durch. Dieses Projekt ist immer noch sehr leistungsstark und ich kann es nur wärmstens empfehlen.

4) Problem: Ich bin auch auf das Problem gestoßen, dass die erste Kopie nicht wirksam wird, was vorerst nicht behoben wurde.

3. Zusammenfassung

1. Wir sind alle auf das Problem gestoßen, dass die erste Kopie nicht wirksam wurde, und wir haben Sweetalert verwendet, um das Problem später zu lösen.

2. Ich habe nur mit den Browsern Google und Firefox experimentiert. Wenn andere Browserversionen nicht verwendet werden können, lesen Sie bitte selbst die anderen Artikel.

Empfohlenes Lernen: „JavaScript-Grundlagen-Tutorial“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kopier- und Einfügefunktion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!