How to copy a div's content to clipboard without flash

后端未结

关注

 3  1410

That\'s it :) I have a div with the id #toCopy, and a button with the id #copy. What\'s the best way to copy #toCopy conte

相关标签:

3条回答

猫巷女王i

2021-01-02 04:00
UPDATED ANSWER Javascript was restricted from using the clipboard, early on. but nowadays it supports copy/paste commands. See documentation of mozilla and caniuse.com.
```
document.execCommand('paste')
```
make sure that you support browsers that don't.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand http://caniuse.com/#search=command

Javascript is not allowed to use the clipboard, but other plugins like flash do have access.

How do I copy to the clipboard in JavaScript?
0 讨论(0)
发布评论:

提交评论
- 加载中...

情话喂你

2021-01-02 04:09

You can copy to clipboard almost in any browser from input elements only (elements that has .value property), but you can't from elements like <div>, <p>, <span>... (elements that has .innerHTML property).

But I use this trick to do so:

Create a temporary input element, say <textarea>
Copy innerHTML from <div> to the newly created <textarea>
Copy .value of <textarea> to clipboard
Remove the temporary <textarea> element we just created

function CopyToClipboard (containerid) {
  // Create a new textarea element and give it id='temp_element'
  var textarea = document.createElement('textarea')
  textarea.id = 'temp_element'
  // Optional step to make less noise on the page, if any!
  textarea.style.height = 0
  // Now append it to your page somewhere, I chose <body>
  document.body.appendChild(textarea)
  // Give our textarea a value of whatever inside the div of id=containerid
  textarea.value = document.getElementById(containerid).innerText
  // Now copy whatever inside the textarea to clipboard
  var selector = document.querySelector('#temp_element')
  selector.select()
  document.execCommand('copy')
  // Remove the textarea
  document.body.removeChild(textarea)
}

<div id="to-copy">
  This text will be copied to your clipboard when you click the button!
</div>
<button onClick="CopyToClipboard('to-copy')">Copy</button>

Little late but hope that helps!

0 讨论(0)

眼角桃花

2021-01-02 04:10

The same without id:

function copyClipboard(el, win){
   var textarea,
       parent;

   if(!win || (win !== win.self) || (win !== win.window))
      win = window;
   textarea = document.createElement('textarea');
   textarea.style.height = 0;
   if(el.parentElement)
      parent = el.parentElement;
   else
      parent = win.document;
   parent.appendChild(textarea);
   textarea.value = el.innerText;
   textarea.select();
   win.document.execCommand('copy');
   parent.removeChild(textarea);
}

I didn't tested for different windows (iframes) though!

0 讨论(0)