Clipboard.js: IE copy not working

[michael-letcher]

Minimal Example

JS
// Instantiate Clipboard.js
var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function (e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });

HTML+AngularJS
<button title="Copy to clipboard" type="button" class="btn btn-info" data-ng-mouseenter="showPassword(x)" data-ng-mouseleave="hidePassword(x)" data-clipboard-target="#pass-{{ x.AccountCredID }}"> <i class="fa fa-clipboard"></i> <span class="hidden-sm hidden-xs">Clipboard</span> </button>

Expected behaviour

I thought that by clicking the copy button it should copy the value to the clipboard.

Actual behaviour

Clipboard success is fired and shows the correct action, text and trigger but the clipboard will be unchanged.

Browsers affected

I tested on Firefox (latest) and Chrome (latest) and only IE 10,11,Edge (latest) does not work.

[michael-letcher]

Found the solution, I had the password in a <span> element. But IE needs it to be either a <input> or a <textarea>.

So I would look at amending your documentation to note the IE limitation there for the copy action. (As I see it is noted for the cut action.)

[zenorocha]

Thanks for sharing your solution @michaels750.

[seanmhanson]

I know this is closed already, but +1 for updating the documentation; this bug just showed up for me too after rolling out a solution and then smoke testing in IE10. Stating this explicitly would have saved me a _lot_ of time.