Pre-note: The original JS is to provide a function to implement this function (Window.clipboarddata), but unfortunately, this function only supports IE and FF browser, so the basic use is small. A third-party plug-in library (zeroclipboard.js) is described below.
Zeroclipboard.js's address on Git is: Https://github.com/zeroclipboard/zeroclipboard
Note: This JS library does not support compatible mobile phones (including Android, IOS) and only supports PC-side browsers.
The first step: introduce the plug-in library into the project.
Copy the dist directory from git to your directory (in fact, only zeroclipboard.js and zeroclipboard.swf are needed ok~)
Script File Introduction:
<script src= "Zeroclipboard.js" ></script>
Step Two: Initialize the plugin library.
var New Zeroclipboard (document.getElementById ("D_clip_button"), { "zeroclipboard.swf"});Step three: On the code.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>Zero Clipboard Test</title>5 <MetaCharSet= "Utf-8">6 </Head>7 <Body>8 <!-- 9 Description:Ten 1.data-clipboard-target Enter the ID of the object to be copied One - A <ButtonID= "D_clip_button"class= "My_clip_button"Data-clipboard-target= "Fe_text"><b>Copy to Clipboard</b></Button> - <BR/> - <textareaID= "Fe_text"cols= " the"rows= "3">Enter the content you want to copy</textarea> the </Body> - </HTML> - <Scripttype= "Text/javascript"src= "Zeroclipboard.js"></Script> - <Scripttype= "Text/javascript"> + //Initializing Replication Objects - varClip= NewZeroclipboard (document.getElementById ("D_clip_button"), { + Moviepath:"zeroclipboard.swf" A } ); at - //copy content to clipboard after successful operation - Clip.on (' Complete', function(client, args) { - Alert ("copy succeeded, copy content to:"+args.text); - } ); - in </Script>
The above example code comment has been introduced to the function of zero Clipboard, need to know more features, go to Https://github.com/zeroclipboard/ZeroClipboard
Note: The operating environment must be in a server environment, otherwise you will not see the effect!
JS to copy content to the Clipboard function, compatible with all PC browsers, incompatible with the mobile phone side "
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
