congdantoancau

SelectAll and Copy Element text to Clipboard

Sep 9th, 2020 (edited)
470
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //SELECTALL AND COPY ELEMENT TEXT TO CLIPBOARD
  2. var SELECTOR = '.w3-code';
  3. var html_button = '<button type="button" class="btn_copy_code">Copy code to clipboard</button>';
  4. //$(SELECTOR).parent().append(html_button);
  5. $(SELECTOR).after(html_button);
  6.  
  7. $('.btn_copy_code').click(function() {
  8.     var selector = $(SELECTOR);
  9.     //selectAll(selector);
  10.     // Get selector index https://stackoverflow.com/questions/3578461/jquery-returning-the-number-eq-of-a-clicked-div?rq=1
  11.     var index = $(this).index('.btn_copy_code');
  12.     //console.log(index);
  13.     //console.log(selector[index]);
  14.     CopyToClipboard(selector[index]);
  15.     $(this).eq(0).html("Copied");
  16. });
  17.  
  18. $(SELECTOR).on('mouseup', function() {
  19.     var sel, range;
  20.     var el = $(this)[0];
  21.     console.log($(this));
  22.     if (window.getSelection && document.createRange) { //Browser compatibility
  23.       sel = window.getSelection();
  24.       if(sel.toString() == ''){ //no text selection
  25.          window.setTimeout(function(){
  26.             range = document.createRange(); //range object
  27.             range.selectNodeContents(el); //sets Range
  28.             sel.removeAllRanges(); //remove all ranges from selection
  29.             sel.addRange(range);//add Range to a Selection.
  30.         },1);
  31.       }
  32.     }else if (document.selection) { //older ie
  33.         sel = document.selection.createRange();
  34.         if(sel.text == ''){ //no text selection
  35.             range = document.body.createTextRange();//Creates TextRange object
  36.             range.moveToElementText(el);//sets Range
  37.             range.select(); //make selection.
  38.         }
  39.     }
  40. });
  41.  
  42. function selectAll(selector) {
  43.     var sel, range;
  44.     var el = selector[0];
  45.     console.log(selector);
  46.     if (window.getSelection && document.createRange) { //Browser compatibility
  47.       sel = window.getSelection();
  48.       if(sel.toString() == ''){ //no text selection
  49.          window.setTimeout(function(){
  50.             range = document.createRange(); //range object
  51.             range.selectNodeContents(el); //sets Range
  52.             sel.removeAllRanges(); //remove all ranges from selection
  53.             sel.addRange(range);//add Range to a Selection.
  54.         },1);
  55.       }
  56.     }else if (document.selection) { //older ie
  57.         sel = document.selection.createRange();
  58.         if(sel.text == ''){ //no text selection
  59.             range = document.body.createTextRange();//Creates TextRange object
  60.             range.moveToElementText(el);//sets Range
  61.             range.select(); //make selection.
  62.         }
  63.     }
  64. }
  65.  
  66. function CopyToClipboard(element) {
  67.     //console.log(element);
  68.   if (document.selection) {
  69.     var range = document.body.createTextRange();
  70.     range.moveToElementText(element);
  71.     range.select().createTextRange();
  72.     document.execCommand("copy");
  73.   } else if (window.getSelection) {
  74.     var range = document.createRange();
  75.     range.selectNode(element);
  76.     //remove all ranges https://stackoverflow.com/questions/51234160/javascript-copy-to-clipboard-works-only-once
  77.     window.getSelection().removeAllRanges();
  78.     window.getSelection().addRange(range);
  79.     document.execCommand("copy");
  80.     //alert("Text has been copied, now paste in the text-area")
  81.   }
  82. }
RAW Paste Data