"JS implementation copy content to the Clipboard function, compatible with all PC browsers, incompatible with mobile phone side"

Source: Internet
Author: User

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 "

Related Article

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.