Last active
May 8, 2022 05:24
-
-
Save M1nified/49778249637a3209412c to your computer and use it in GitHub Desktop.
Simple example of document.execCommand('copy')
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This is an example of document.execCommand('copy') | |
| Working copy available at https://jsfiddle.net/M1nified/Lv8qz9j9 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| $('.btnCopy').on('click',function(evt){ | |
| console.log(evt); | |
| console.log('IS COPY SUPPORTED?:',document.queryCommandSupported('copy')); | |
| document.execCommand('copy'); | |
| }) | |
| $('.btnCopyTarget').on('click',function(evt){ | |
| console.log(evt); | |
| console.log('IS COPY SUPPORTED?:',document.queryCommandSupported('copy')); | |
| var targetid = $(this).data('target'); | |
| var target = $('#'+targetid); | |
| if(target.is('input,textarea')){ | |
| console.log('SIMPLE SELECT'); | |
| target.select(); | |
| }else{ | |
| console.log('ADVANCED SELECT'); | |
| selectElement(target[0]); | |
| } | |
| console.log('document.execCommand(\'copy\') RESULT:',document.execCommand('copy')); | |
| }) | |
| }) | |
| var selectElement = function(element){ | |
| if(window.getSelection){ | |
| console.log('window.getSelection'); | |
| var range = document.createRange(); | |
| range.selectNodeContents(element); | |
| window.getSelection().removeAllRanges(); | |
| window.getSelection().addRange( range ); | |
| }else if(document.selection){ | |
| console.log('document.selection'); | |
| var range = document.body.createTextRange(); | |
| range.moveToElementText(element); | |
| range.select(); | |
| }else{ | |
| console.error('COULDN\'T SELECT :/'); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>document.execCommand('copy')</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <script src="commands.js"></script> | |
| <style> | |
| #hiddencontent{ | |
| width:1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p> | |
| Some text to be selected. | |
| </p> | |
| <button type="button" class="btnCopy">Copy selection to clipboard</button> | |
| <hr> | |
| <input type="text" id="copyme" value="Some text value :)"> | |
| <button type="button" class="btnCopyTarget" data-target="copyme">Copy nearby field</button> | |
| <hr> | |
| <div class="" id="copydiv"> | |
| Some text inside a div. | |
| </div> | |
| <button type="button" class="btnCopyTarget" data-target="copydiv">Copy above div</button> | |
| <hr> | |
| <div class="" id="hiddencontent"> | |
| This is hidden content, I'm so sneaky ;) | |
| </div> | |
| <button type="button" class="btnCopyTarget" data-target="hiddencontent">Copy text from hidden div</button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment