How to copy to clipboard without using flash?

Question

How to copy to clipboard without using flash?

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (1 votes)

6

Google Chrome is displaying a message. This site uses a plug-in (Adobe Flash Player) that will not be compatible soon.

Is there any way to do it without Flash? How?

And something that preferably copies an attribute, for example:

<a href="javascript:;" copy-to-clipboard="Isso aqui vai ser copiado">Copiar</a>

Copy the case to the copy-to-clipboard attribute.

javascript html jquery html5

asked by anonymous 17.08.2015 / 16:26

3 answers

score 4 · Answer 1

This example found in the international stackoverflow performs the copy to the clipboard using document.execCommand('copy') that is currently supported by latest version of the major browsers.

Example

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<p>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

<p>
  <button class="js-textareacopybtn">Copiar conteúdo</button>
</p>

For more information and a more complex example, visit original response .

score 1 · Answer 2

An even better way is to work with api clipboard HTML 5 to do this: link

You can consult the supported browsers at: link

This was also a response from StackOverFlow in English, in a question corresponding to yours. How can I copy to clipboard in HTML5 without using flash?

score 1 · Answer 3

You can use clipboardJS , it has no dependencies and does not require Flash technology .

The only problem is support, according to the README the selection and document#execCommand and the browsers they support are:

Firefox 41+
Chrome 42 +
Internet Explorer 9+
Opera 29 +

basic:

In this example, whatever is set in the data-text :

new Clipboard('button');

<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script><buttondata-text='Thequickbrownfoxjumpsoverthelazydog.'>copiar</button>

copyingtextfromanotherelement:

Inthisexample,whatiswritteninthetextinputwillbecopied.

new Clipboard('button');

<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script><inputid='id-do-input'type='text'placeholder='Textoqueserácopiado...'/><buttondata-target='id-do-input'>copiar</button>

events:

Youcangetsuccessorfailureinformationwhenyoutrytocopysomethingtotheclipboard.Turnontheconsolectrlshiftk)toviewoutputwhenclickingthesnippetbelow:

var clip = new Clipboard('button');

clip.on('success', function(e) {
  console.info('Ação:', e.action);
  console.info('Conteúdo copiado:', e.text);
  console.info('Trigger:', e.trigger); // no caso de "copiar de outro elemento"

  e.clearSelection();
});

clip.on('error', function(e) {
  console.error('Ação:', e.action);
  console.error('Trigger:', e.trigger);
});

<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

<button data-text='Testando eventos'>copiar</button>