Clipboard.js: Add DOM-independent copy/cut API

[zenorocha]

Part II of a new major release proposal #516

Current state

new Clipboard('.btn', {
    text: function(trigger) {
        return 'blah blah';
    }
});

Proposal

button.addEventListener('click', () => {
    clipboard.copy('blah blah')
})

Benefits

Today a click event listener is created inside the library in order to facilitate usage. The problem is that attaching an event to the DOM might not be a good idea when using Angular, React, Vue, etc

The benefits of this approach is that users can call a copy/cut function independently inside their own event listeners.

Drawbacks

Users will need to know that an event listener is necessary, otherwise it will not work.

Related

203 #218 #231 #258 #329 #389 #446 #466 #489 #498 #474

[deejay-baddog]

got it. thank you very much.

[hng0]

I think the drawback is not a big problem since we can mention this in the documentation. The huge DOM-independent advantage outweighs this.

Also, the api to handle success and error should be refined. How about having it throwing error when attempt to copy to clipboard fails?

[zenorocha]

@hoangmngo error handling is being mentioned here #517

[danielravina]

Users will need to know that an event listener is necessary, otherwise it will not work.

That's why we have a Readme 😃

[yuri-wisestamp]

So there's no way to do it at the moment?

[zenorocha]

There is a way, but browser support is very limited.

https://caniuse.com/#search=clipboard

I'm tracking the status of the implementation as soon as it lands on other major browsers, I'll update the library to address this use case.

[TheGr8Nik]

It seems that all the major browsers allow triggering copy events inside a event handler, but not paste events.

https://jsbin.com/huhekiqope/1/edit?html,js,console,output

Click on Copy button will correctly copy the data in clipboard, while click on Paste will not trigger paste event. Using Ctrl+v will trigger the event correctly.

[RobertAKARobin]

Can't you just expose ClipboardAction for importing and let users do it themselves?