MozillaZine

Fx 33.1.1 cannot copy and paste to clipboard with javascript

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
aditya.aery
New Member
 
Posts: 1
Joined: November 29th, 2014, 1:26 am

Post Posted 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
Last edited by James on November 29th, 2014, 2:18 am, edited 1 time in total.
Reason: splitted off from old Dec 2012 thread http://forums.mozillazine.org/viewtopic.php?f=25&t=2626379

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted 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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Frenzie

User avatar
 
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted 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>
Intelligent alien life does exist, otherwise they would have contacted us.

jscher2000

User avatar
 
Posts: 10630
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted 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>

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 2 guests