js realizes one click copy function

Project Description: Recently, a mobile activity page will be made, and a redemption code will be generated after the user draws. In order to optimize the user experience, a copy button needs to be made, which can copy the redemption code with one key.

Project Requirements: Compatible with all mainstream browsers on the mobile side. And as an H5 page for Android and IOS.

At present, there are several ways to realize the replication function:

execCommand("copy"); clipboardData; ZeroClipboard.js

1. execCommand: Is a method of doucment object, which can realize many functions of browser menu, such as saving file, opening new file, undoing, copying, and so on. You can complete text editing better

Has the following usage:

[All Choices]

Format: document. execCommand ("SelectAll");

"Open"

Format: document. execCommand ("Open");

"Save As"

Format: document. execCommand ("SaveAs");

"Print"

Format: document. execCommand ("print");

"Cut"

Format: document. execCommand ("Cut", "false", null);

"Delete"

Format: document. execCommand ("Delete", "false", null);

"Change Text Font"

Format: document. execCommand ("FontName", "false", sFontName);

"Change font size"

Format: document. execCommand ("FontSize", "false", sSizeiSize);

"Make Absolutely Positioned Elements Drag"

Format: document. execCommand ("2D-Position", "false", "true");

"Copy"

Format: document. execCommand ("Copy", "false", null);

Wait

Application example:

HTML:

<input onclick="copy()" value="你好.要copy的内容!">

js code:

function copy(){
 var Url2=document.getElementById("js-copy-text");
 Url2.select(); //  Select object 
 try{
  if(document.execCommand('copy', false, null)){
   document.execCommand("Copy");
   alert(" It has been copied and can be pasted. ");
  } else{
   alert(" Copy failed, please copy manually ");
  }
  } catch(err){
   alert(" Copy failed, please copy manually ");
  }
}

Note: After testing this method, IE on PC needs to set permissions manually, which is supported by other browsers, and few browsers on M support it;

2. clipboardData: Object provides access to the clipboard

clipboardData has three methods:

clearData (sDataFormat) deletes data in the specified format from the clipboard; clearData (sDataFormat) getData (sDataFormat) retrieves formatted data from the clipboard; clearData (sDataFormat) setData (sDataFormat, sData) gives the clipboard data in the specified format, and returns true to indicate successful operation;

Application example:

<input onclick="copy(this)" value="你好.要copy的内容!">

js code:

function copy(){
 window.clipboardData.setData("text",document.getElementById("mytext").value);
 alert("The text is on the clipboard, try to paste it!");
} 　　 

Note: After testing, this method is only effective in IE browser.

Running on another browser will report an error:

firefox: TypeError: window. clipboardData is undefined

chrom: TypeError: Cannot read property 'setData' of undefined

After investigation:

MSDN https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
This object is available in script as of Microsoft Internet Explorer 5.
http://help. dottoro. com/ljctuhrg. php also indicates that this method only supports IE for security reasons:
In Firefox, Opera, Google Chrome and Safari, use the execCommand method with the 'Paste' command to retrieve and with the 'Copy' command to set the text content of the clipboard. Because of security restrictions, this method may not always work, see Example 2 for details.