Shulou(Shulou.com)06/03 Report--

This article introduces you do not need to rely on any JS library to achieve text copying and cutting is like, the content is very detailed, interested friends can refer to, hope to be helpful to you.

We put a copy button on the web page, which is mainly used to facilitate users to copy complex text such as links. In the past, we used to copy the text to the clipboard through JS relying on Flash, or even with the help of jQuery's huge js library. What I'm going to introduce to you today is a very modern plug-in that doesn't need flash and doesn't rely on any other js libraries. It's called clipboard.js.

HTML

First load the local clipboard.js file.

Then add the contents of the text field to copy or cut and buttons in the body.

Copy

Here, we use the data- attribute of HTML5 to locate the replication object target, which points to the text field # foo, indicating that the value content in # foo is copied. The aria-label attribute defines the information after the replication is successful and is used to prompt the replication result information.

There is also an attribute, data-clipboard-action, which defines whether the current operation is copied or cut. The default is copy. When data-clipboard-action= "cut", clicking the button will cut the text, just like the WORD operation. Of course, the clipping operation applies only to text and textarea.

We can also not need the content of elements such as input and textarea as copy objects, we can define the content to be copied on the button through the ata-clipboard-text attribute, and click the button to copy to the corresponding content of ata-clipboard-text.

Copy

Javascript

Add the following code to the previous one, save and open the browser, and click the button to copy it.

New Clipboard ('.btn')

Of course, we can deal with it further, for example, when the replication is complete, it is more friendly to copy the successful information, as long as you execute the following code:

Var clipboard = new Clipboard ('.btn'); clipboard.on ('success', function (e) {var msg = e.trigger.getAttribute (' aria-label'); alert (msg); e.clearSelection ();})

On no need to rely on any JS library to achieve text copying and cutting is what is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.