How to implement copy and paste function in javaScript

How to implement the copy and paste function in javaScript: 1. Through the "document.execCommand('copy')" method; 2. Through ClipboardJS to copy the content.

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

How to implement copy and paste function in javaScript?

Two ways to implement copy and paste in js

1. Preface

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

2. Method, recommendation 2.

1. The first method

1), through document.execCommand('copy')

2), the front-end code is as follows:

 
 
 
 
 



点我复制

3) Summary: Mainly copy the href in the a tag through class and id, put the copied content into the generated input tag, and then remove the input tag after copying. You can copy the content and modify it yourself. js.

4), problem: the first click does not take effect, you need to click twice, which is not solved yet

2, the second method

1), through ClipboardJS To copy the content, we recommend this

2), git address: clipboardjs(https://clipboardjs.com/)

3), the front-end code is as follows:

 
 
 
 
 
 



 

 Copy



 

3) Summary: Please read the document carefully. This project is still very powerful and I highly recommend this.

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

3. Summary

1. We all encountered the problem that the first copy did not take effect. For subsequent solutions, we all used sweetalert.

2. I have only experimented with Google and Firefox browsers, and they can be used. If other browser versions cannot be used, please check other articles by yourself. Communication and corrections are welcome.

Recommended study: "javascript basic tutorial"

The above is the detailed content of How to implement copy and paste function in javaScript. For more information, please follow other related articles on the PHP Chinese website!