Implementation Scheme for calling the javaScript replication function

Source: Internet
Author: User

Copy codeThe code is as follows: Verification code: <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 ("copied to clipboard ");
} Else {
Prompt ("Copy:", codeVal );
}
// Window. clipboardData. setData ("Text", jQuery ("# code"). val ());
}
</Script>

Recently, I have no mood to write blog posts, mainly because there are more and more upset things.
Ah! Leave the question and return to this article. Speaking of the click Copy function using js, the method I want to talk about below is also similar to that on the Internet. Js implementation is very simple, and the most difficult issue is compatibility. After all, there are still many people outside of IE. Here, I also summarize the methods based on the relevant online resources.

Method 1: one-by-one discriminant Processing
The method is simple and easy to understand. It is to execute different js Code to implement the replication function by judging the browser category of the client. Theoretically, this works. However, the fact is not as easy as we think. Because we don't know how to write JavaScript code in Some browsers, at least I know IE and FF.

If it is compatible with IE and FF, it is much easier. Here I use a famous Internet Method to Determine the IE core, the 13-byte method, which is also frequently used by me.Copy codeThe Code is as follows: if ("\ v" = "v") {// 13 bytes
// Here is the IE core, the Code executed, and the test is compatible with IE8
} Else {
// Execute code with non-IE Cores
}

Here I will write a general architecture for implementing replication. I don't stick to the specific code. I can find it easily on the Internet for your reference.Copy codeThe Code is as follows: function clipBoard (object ){
// Obtain the object value, that is, the copied content.
Var copyTxt = document. getElementById (object). value;
// Call copy2Clipboar to implement browser, judgment, and Code Execution
If (copy2Clipboard (copyTxt )! = False ){
Alert ('copied successfully ');
}
}
Copy2Clipboard = function (txt ){
If ("\ v" = "v "){
// Execute code in IE browser
Window. clipboardData. clearData ();
Window. clipboardData. setData ("Text", txt );
Return true;
} Else if (navigator. userAgent. indexOf ("Firefox")> 0 ){
// Firefox
Return true;
} Else if (window. google & window. chrome ){
// Chrome
Return true;
} Else {
Alert ("not supported by browsers ");
Return false;
}
}

You can add different judgment browser code as needed to implement the copy function under the browser. Generally, this order is determined based on IE> FF> opera/chrome> and others.

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

The installation and usage methods can be found on the above two web sites, E version, the Chinese version can only be found by searching!
Here I provide a simple version of the implementation framework, which is useful in the above implementation method. The modification is made here. according to the instructions of the official version, this function can be easily implemented on a single page, but some problems may occur when it is applied to some CMS. What's the problem? On the IE core page, "this page has been terminated" is displayed ". The reason is very simple, that is, js loading unfinished achievements call. If it is an IE problem, we can use the IE Judgment Method to separate IE, and use the flash method to implement other cores.Copy codeCode: function checkClient (object) {// judge the browser
Var copyTxt = document. getElementById (object). value; // obtain the copied content.
If ("v "! = "V "){
// Set it here according to the official documentation
// Set the flash location here, which is absolutely acceptable
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 command is used to determine whether it is an IE core. The IE core does not use the flash processing method and directly uses the replication mechanism.Copy codeThe Code is as follows: // copy Processing
Function clipBoard (object ){
Var copyTxt = document. getElementById (object). value;
If (copy2Clipboard (copyTxt )! = False ){
Alert ('copied successfully ');
}
}
Copy2Clipboard = function (txt ){
If ("\ v" = "v") {// determines whether the browser is Internet Explorer
Window. clipboardData. clearData ();
Window. clipboardData. setData ("Text", txt );
Return true;
}
Else {// direct return without IE Core
Return true;
}

The simplest setting method of the second method is to place the code between Set the text field of the copied content Copy codeThe Code is as follows: <input type = "text" id = "textinfo"
Onmouseout = "checkClient ('textinfo')" value = "Copied content" size = "65"/>

Set trigger object buttonCopy codeThe Code is as follows: <div id = "d_clip_button" onclick = "copyCode ('textinfo')"> copy address </div>

This is the second method.Copy codeThe Code is as follows: <script> checkClient ('textinfo'); </script>

Here, the general steps are as follows, and some id names can be modified as needed. At least the complete code can be found in 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.