JavaScript replication function calls Implementation basics

Source: Internet
Author: User
Copy Code code as follows:

Authenticode: <input type= "text" id= "code"/> <input type= "button" value= "Copy" onclick= "Fuzhi ()" >
<script type= "Text/javascript" >
function Fuzhi () {
var codeval=jquery ("#code"). Val ();
alert (codeval);
if (Navigator.userAgent.toLowerCase (). indexOf (' IE ') >-1) {//ie browser
Clipboarddata.setdata (' Text ', codeval);
Alert ("has been copied to the Clipboard");
} else {
Prompt ("Please copy:", Codeval);
}
Window.clipboardData.setData ("Text", JQuery ("#code"). Val ());
}
</script>


Recently have no mood to write blog, mainly because of the upset things gradually more.
Hey! Digress, back to this article. When it comes to using JS to achieve the function of click and copy, I would like to say the following method is similar to the Internet. JS implementation is very simple, the most difficult is the compatibility problem, after all, there are many people other than ie. Here, I also based on the relevant resources on the Internet to summarize the method.

method One, each discriminant processing method
The method is very simple and easy to understand, that is, by judging the client browser category, to execute different JS code to implement the replication function. Although theoretically, this is a good line. But the facts are not as easy as we think. Because we are not very clear some browsers under the JS copy code, 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 an online more well-known method of judging ie kernel, 13-byte method, this is also my commonly used.
Copy Code code as follows:

if ("\v" = = "V") {//13 bytes
Here is IE kernel, executed code, pro-Test compatible IE8
}else{
Non IE kernel execution code
}

Here I write a general framework for the implementation of replication, the specific code I do not stick up, the Internet can be very simple to find, for you to reference
Copy Code code as follows:

function ClipBoard (object) {
Gets the value of object, that is, the copied content
var Copytxt=document.getelementbyid (object). Value;
Call Copy2clipboar to implement the browser, judge and execute code
if (Copy2clipboard (copytxt)!= false) {
Alert (' Copy successful ');
}
}
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 browser
return true;
}else if (window.google && window.chrome) {
Chrome browser
return true;
}else{
Alert ("Browser does not support");
return false;
}
}

Depending on your needs, you can add different decision browser code to implement the replication function under the browser. In general, according to the IE > FF > opera/chrome> Other, this order is judged.

method Two, Flash indirect processing method
The principle is very simple, by creating a flash, the copied content is passed to Flash,flash in a variable way and then the content is copied into memory, so that the copy function is realized. As long as the support of Flash, is arguably compatible with the vast majority of browsers, this method is what I saw today, also tested verification.

Installation and use of methods, can be found on the top two web sites, e-text version, the Chinese version only through search to find a slightly!
Here I provide a simple version of the implementation framework, which is useful to implement the above. Here are modified, according to the official version of the method, in a single page can easily achieve this function, but in the actual application to some CMS, may encounter some problems. What's the problem? The IE kernel page pops up "This page is terminated." The reason is very simple, that is, JS load is not completed on the call. Unexpectedly is the problem of IE, then we can use the method of judging ie, ie independent of the other kernel, the use of Flash method to achieve.
Copy Code code as follows:

function CheckClient (object) {//Judge browser
var Copytxt=document.getelementbyid (object). Value; Get the copied content
if ("V"!= "V") {
Set up here according to the official document
Here, set the flash location, absolutely relative to all
Zeroclipboard.setmoviepath (' zeroclipboard.swf ');
Create a Replication object
var clip = new Zeroclipboard.client ();
Set Hand shape
Clip.sethandcursor (TRUE);
Set content for replication
Clip.settext (Copytxt);
Set Trigger Object
>clip.glue (' D_clip_button ');
}
}

This is used to determine if the IE kernel, ie core will not use flash processing, directly using the replication mechanism
Copy Code code as follows:

Replication processing
function ClipBoard (object) {
var Copytxt=document.getelementbyid (object). Value;
if (Copy2clipboard (copytxt)!= false) {
Alert (' Copy successful ');
}
}
Copy2clipboard = function (TXT) {
if ("\v" = = "V") {//determine if IE browser
Window.clipboardData.clearData ();
Window.clipboardData.setData ("Text", txt);
return true;
}
else{//Non IE core direct return
return true;
}

This is the simplest way to set the second method, put the code between the Set the text field for the copied content
Copy Code code as follows:

<input type= "text" id= "TextInfo"
onmouseout= "CheckClient (' TextInfo ')" value= "copied content" Size= "/>"

Set Trigger Object button
Copy Code code as follows:

<div id= "D_clip_button" onclick= "Copycode (' TextInfo ')" > Copy address </div>

This is the second method to add, set the detection browser
Copy Code code as follows:

<script>checkclient (' TextInfo ');</script>

Here, the approximate step is this, and some of the ID's names can be modified as needed. At least complete code, you can refer to the official demo.
Tired.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.