How to copy to clipboard without using flash?

Asked

Viewed 2,663 times

6

google Chrome is displaying a message from "This site uses plug-in (Adobe Flash Player) that will soon be no longer compatible".

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 only the value in the attribute copy-to-Clipboard.

javascript jquery html html5 clipboard

  • I know you have how to do this in Google Chrome, Firefox and Internet Explorer (think) that only with flash.

  • Because and, today I have implemented with Flash.. only that this showing this message on Google Chrome and I want to prevent.

  • See if this helps https://www.npmjs.com/package/clipboard-js

3 answers

4

This example found in stackoverflow international performs the copy to the clipboard using document.execCommand('copy') which is currently supported by the 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 additional information and a more complex example, see original response.

1

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

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

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

basic:

In this example is copied whatever is defined in the attribute data-text:

new Clipboard('button');
<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

<button data-text='The quick brown fox jumps over the lazy dog.'>
   copiar
</button>

copying text from another element:

In this example, whatever is written in the input text. 

new Clipboard('button');
<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

<input id='id-do-input' type='text' placeholder='Texto que será copiado...'/>
<button data-target='id-do-input'>copiar</button>

events:

You can get success or failure information by trying to copy something to the clipboard. Enable the console (Ctrlshiftk) to view the output when you click on the snippet next:

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>

1

Browser other questions tagged javascript jquery html html5 clipboard

You are not signed in. Login or sign up in order to post.