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
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
