javaScript copy function call implementation solution_Basic knowledge

Copy code The code is as follows:

Verification code:

I haven’t been in the mood to write a blog post recently, mainly because I have been worrying about more and more things.
Hey! I digress, back to this article. When it comes to using js to implement the click-to-copy function, the method I want to talk about below is similar to that found on the Internet. js implementation is very simple. The most difficult thing is the compatibility issue. After all, there are still many people who use other than IE. Here, I also summarize the methods based on relevant resources on the Internet.

Method 1, one by one identification and processing method
The method is very simple and easy to understand, which is to execute different js codes to realize the copy function by judging the client browser type. Although in theory, this works. However, it is not as easy as we think. Because we don't know much about how to write js copy code in some browsers, at least what I know is IE and FF.

It would be much simpler if it was only compatible with IE and FF. Here I use a relatively well-known method on the Internet to determine the IE core, the 13-byte method, which I also commonly use.

Copy code The code is as follows:

if("v"=="v") { //13 bytes
//Here is the IE core, the executed code, personally tested to be compatible with IE8
}else{
//Non-IE core execution code
}

Here I write a rough structure for realizing replication. I won’t paste the specific code. You can easily find it online. For your reference

Copy code The code is as follows:

function clipBoard(object){
//Get the value of object, that is, copy the content
var copyTxt=document.getElementById(object ; 🎜>}
copy2Clipboard = function(txt){
if("v"=="v"){
//IE browser execution code
window.clipboardData.clearData();
window.clipboardData.setData("Text",txt);
return true;
}else if(navigator.userAgent.indexOf("Firefox")>0){
//Firefox browsing
return true;
}else if(window.google && window.chrome){
//chrome browser
return true;
}else{
alert("Browse The browser does not support ");
return false;
}
}


You can add different judgment browser codes as needed to realize the copy function under that browser. Under normal circumstances, the judgment is based on the order of IE > FF > opera/chrome > others.


Method 2, flash indirect processing method

The principle is very simple. By creating a flash, the copied content is passed to the flash in the form of variables, and the flash then copies the content to the memory. , thus realizing the copy function. As long as it supports flash, it is theoretically compatible with most browsers. This method is what I saw today and has been tested and verified.

Installation and usage instructions can be found on the two websites above. The E-text version and the Chinese version can only be found through search! Here I provide a simple version of the implementation framework. The above implementation method is used here. There are modifications here. According to the official version of the instructions, this function can be easily implemented on a single page, but in actual application in some CMS, you may encounter some problems. What's the problem? The IE core page will pop up "This page has been terminated". The reason is very simple, it is called before js loading is completed. It turns out to be a problem with IE, then we can use the method of judging IE to isolate IE, and other cores can be implemented using the flash method.



Copy code

The code is as follows:

function checkClient(object){//Determine the browser
var copyTxt=document.getElementById(object).value; //Get the copied content
if("v"!="v "){
//Set the flash position here according to the official document
//Set the flash position here, absolutely or relatively
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
//Create a copy object
var clip = new ZeroClipboard.Client();
//Set the hand shape
clip.setHandCursor(true);
//Set the copied content
clip.setText(copyTxt);
//Set the trigger object
>clip.glue('d_clip_button');
}
}

This is used to determine whether it is the IE core. The IE core will Do not use flash processing, directly use the copy mechanism

Copy code The code is as follows:

// Copy processing
function clipBoard(object){
var copyTxt=document.getElementById(object).value;
if(copy2Clipboard(copyTxt)!= false){
alert('copy successful') ;
}
}
copy2Clipboard = function(txt){
if("v"=="v") { //Determine whether it is an IE browser
window.clipboardData.clearData ();
window.clipboardData.setData("Text",txt);
return true;
}
else{ //Non-IE core returns directly
return true;
}

The above is the simplest setting method for the second method. Just put the code between It doesn’t matter whether it is the first or the second method. You must add the following two lines of code to the page that needs to be copied
Set the text field of the copied content

Copy code The code is as follows:

onmouseout="checkClient('textinfo')" value="Copied content" size ="65"/>

Set trigger object button

Copy code The code is as follows:

Copy address

This is the second method To add, set the detection browser

Copy the code The code is as follows:

Written here, the general steps are like this, and some id names can be modified as needed. At least for the complete code, you can refer to the official demo.
Tired.