JS copy content to clipboard, compatible with PC and mobile phone, support Safari browser

Source: Internet
Author: User

Recently, some projects have been used to monitor user replication. The cut operation.

JavaScript native has some events: Copy, paste, cut,

These events can function as target elements:

The element that can focus (such as contentEditable the content can be edited or the element that can be selected), or<body>

1<div id= "Cardlist" >2<div class= "BTN" > Click me, Copy Me </div>3</div>4         5         6         7<script type= "Text/javascript" >8             9             functionCopy (str) {Ten                 varSave =function(e) { OneE.clipboarddata.setdata (' Text/plain ', str);//The following will speak of Clipboarddata object A E.preventdefault ();//block default behavior -                 } -Document.addeventlistener (' Copy ', save); theDocument.execcommand ("Copy");//Make the document editable, otherwise invalid -             } -                      -document.getElementById (' Cardlist '). AddEventListener (' click '),function(EV) { + copy (Ev.target.innerText) -             }) +                  A</script>

Use the methods in jquery to listen for the user's cut, copy, paste behavior:

1 $ ("#cut"). On ("Cut",function() {2    alert ("Cut"); 3 }); 4 $ ("#copy"). On ("copy",function() {5    alert ("Copy"); 6 }); 7 $ ("#paste"). On ("Paste",function() {8    alert ("Paste"); 9 });

These include actions such as CTRL + C with the keyboard, or right-click, copy, and so on.

Evevt.clipboarddata Object

Clipboarddata is a JavaScript Clipboard object that provides 3 common methods:

ClearData (): Clipboarddata object removes one or more data formats from the Clipboard (one parameter: data type)

GetData (): Clipboarddata object gets data in the specified format from the clipboard (one parameter: data type)

SetData (): Clipboarddata object gives data in the specified format (two parameters: data type, value to be assigned)

* Data type is generally "" "" "" text/plain

Evevt.clipboarddata Object compatibility issues

After trying, Clipboarddata object compatible with most PX browsers, such as Chrome,firefox, ie, etc., but on the phone side compatibility is not very good,

Currently clipboarddata on iOS Safari browser is invalid, in order to solve the problem of mobile, we refer to a JS plugin--clipboard.js

Clipboard.js relies on the selection API and ExecCommand API launched by HTML5

  Use:

  Introducing in the page

1 <script src= "Clipboard.min.js" ></script>

Using Clipboard.js Custom Properties

1        <!--Use the Data-clipboard-target property to specify the label to be copied--2         <!--Use the Data-clipboard-action property to specify some actions, copy (copy), Cut (cut) --3        <!--Note: The cut operation is only available for <textarea> and <input>-->4<div style= "Margin:2em" >5<textarea id= "Id_text" ></textarea>6<button type= "button" id= "Id_copy"7data-clipboard-target= "#id_text"8data-clipboard-action= "Copy" >Click Copy9</button>Ten</div>

  

1      varClipboard =NewClipboard ("#id_copy");2Clipboard.on ("Success",function(Element) {//Replication Successful callbacks3Console.info ("Copy succeeded, copy content:" +element.text);4         });5Clipboard.on ("Error",function(Element) {//Replication failed callbacks6 console.info (element);7         })8});

Advanced usage

1 // Cleaning up Clipboard objects 2     var New Clipboard ('. btn '); 3     Clipboard.destroy ();

JS copy content to clipboard, compatible with PC and mobile phone, support Safari browser

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.