We put a copy button on the web page,It is mainly used for users to copy complex text such as links.In the past,Relying on flash through js and even using jquery's huge js library to copy text to the clipboard.Today I want to introduce you to a very modern,Very small plugins that do not require flash and do not depend on any other js libraries,It's called clipboard.js.

Operation effect diagram:


First load the local clipboard.js file.

<script src="clipboard.min.js"></script>

Then add the text field content and button to be copied or cut in the body.

<input value="/go.php?Id=73145&s=a">
<button data-clipboard-target="#foo" aria-label="Copy succeeded!">Copy</button>

Here, we use the data-attribute of html5 to locate the copy target.It points to the text field #foo, indicating that the value content in #foo is copied. The aria-label attribute defines the information after the copy is successful.Used to prompt the copy result information.

There is also a property data-clipboard-action, which defines whether the current operation is copied or cut,Copying by default,When data-clipboard-action="cut", then clicking the button will cut the text,Same as word operation.Of course, the cut operation only works for text and textarea.

We can also remove 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 property,Click the button to copy the content to ata-clipboard-text.

<button data-clipboard-text="here is what to copy" aria-label="copy succeeded!">copy</button>

javascriptAdd the following code to the

Of course we can go further.For example, when copying is complete,It is more friendly to copy the successful information.Just 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 ();
  • Previous Graphics2D class basic usage tutorial in Java
  • Next iOS development details about the property settings readwrite, readonly, retain, copy, assign, nonatomic