Fx 33.1.1 cannot copy and paste to clipboard with javascript

aditya.aery · Post by **aditya.aery** » November 29th, 2014, 1:30 am

Hello,

I am trying to implement "Copy to Clipboard" functionality in Mozilla Firefox 33.1. Simplest option is to use javascript window prompt

window.prompt("Copy to clipboard: Ctrl+C, Enter", "test");

But using this option, I can't avoid the unnecessary "Ok" and "Cancel" button in the prompt. Moreover, it opens a new tab to display the javascript prompt. I tried another way by using the following line of code in my <script> block

$('<input type="text">').appendTo('body').val("test val").select();

But it doesn't seem to work. Basically, I want to implement a popup from the same page (Spawn a text box, put the text in and select it so that the user can copy it with the platform specific key combination).

Can someone please help me to understand how I can achieve this in javascript? A working example in this regard will be very helpful.

Thanks
Aditya Aery

patrickjdempsey · November 29th, 2014, 10:11 am

For a long long time now, for security reasons, websites are not allowed to have access to the clipboard.

Frenzie · Post by **Frenzie** » November 29th, 2014, 2:25 pm

The OP isn't trying to access the clipboard though.

Btw, there are security implications with writing (not reading) to the clipboard? I thought that was only the most annoying thing ever.

@OP select() works even in jQuery. Working example:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#btn1").click(function(){
  $('<input type="text">').appendTo('body').val("test val").select();
 });
});
</script>
</head>
<body>
<button id="btn1">click me</button>
</body>
</html>

jscher2000 · Post by **jscher2000** » November 30th, 2014, 4:16 pm

aditya.aery wrote:
Code: Select all
window.prompt("Copy to clipboard: Ctrl+C, Enter", "test");
But using this option, I can't avoid the unnecessary "Ok" and "Cancel" button in the prompt. Moreover, it opens a new tab to display the javascript prompt.

I agree you're stuck with OK and Cancel, which is confusing for the user since neither has any effect, but I don't know why you would get the prompt on a new tab. That sounds like a bug.

aditya.aery wrote:Basically, I want to implement a popup from the same page (Spawn a text box, put the text in and select it so that the user can copy it with the platform specific key combination).

You could have a hidden div that you display when needed. Maybe along these lines:

Code: Select all

Proof-of-concept only! <button onclick="document.getElementById('copyfrom').style.display='block'; var d=new Date(); document.getElementById('texttocopy').innerHTML='woo-hoo! '+d.toString(); document.getElementById('texttocopy').select();">Show control</button>
<div id="copyfrom" style="position:absolute; z-index:100; height:250px; top:50px; width:400px; left:50px; display:none; background-color:blue;"><textarea id="texttocopy" style="width:380px; height:200px; margin:5px; padding:5px; border:none"></textarea><br>
<button onclick="document.getElementById('copyfrom').style.display='none';" style="display:block; margin-left:auto; margin-right:auto;">Close</button></div>

Fx 33.1.1 cannot copy and paste to clipboard with javascript

Fx 33.1.1 cannot copy and paste to clipboard with javascript

Re: Fx 33.1.1 cannot copy and paste to clipboard with javasc

Re: Fx 33.1.1 cannot copy and paste to clipboard with javasc

Re: Fx 33.1.1 cannot copy and paste to clipboard with javasc