Of Stack

Two Methods of Realizing Copy and Paste in js

  • 2021-10-11 17:35:23
  • OfStack

This article example for everyone to share js to achieve copy and paste the specific code for your reference, the specific content is as follows

1. Frontier

The interface needs copy function, so I wrote one as a simple record

2. Method, the second one is recommended.

1. Method 1

1), via document. execCommand ('copy')
2) The front-end code is as follows: 


<!DOCTYPE html>
<html lang="en">
<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 class="copy_file" onclick="copyText('copy_file')"> Click me to copy </button>
<a id="copy_file" href=" Copy content " ></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(" Copy successful! ","success");
  }
  document.body.removeChild(input);
 })
}

</script>
</body>

3). Summary: Mainly copy href in a tag through class and id, put the copied content into the generated input tag, and then give input tag to remove after copying. You can play the copied content by yourself and modify js.
4). Problem: The first click will not take effect, and it needs to be clicked twice, which will not be solved for the time being

2. Method 2

1). Realize the copy of content through ClipboardJS. This is recommended
2), git Address: clipboardjs
3) The front-end code is as follows: 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!--  Please go by yourself git Project download  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')-->
<!--  });-->  If your project is  bootstrap Framework, please use this 
  clipboard.on('success', function(e) {
   console.log(e);
   swal(" Copy successful! ","success");
   clipboard.destroy();
  });

  clipboard.on('error', function(e) {
   console.log(e);
   swal(" Replication failed ","error");
   clipboard.destroy();
  });
}
</script>

3), Summary: Please 1 Be sure to read the documentation carefully. This project is still very powerful, highly recommended this.

4). Problem: I also encountered the problem that the first copy did not take effect, which will not be solved for the time being.

3. Summary

1. All of them encountered the problem that the first replication did not take effect, and sweetalert was adopted for subsequent solutions.
2. Individuals have only experimented in Google and Firefox browsers, which can be used. If other browsers can't be used, please consult other articles by yourself. Welcome to communicate and correct you.

Related articles: