Copy for Clipboard in Firefox

Question

I have found a source code for copying to clipboard that is fitable for

IE:

"http://jsfiddle.net/azgugmjb/7/light/"

"https://jsfiddle.net/jsLfnnvy/12/"

and

Chrome

"Copy to Clipboard using Chrome only"

But not for Firefox.

Do you know any sourcecode for Firefox in relation to copying to clipboard?

I DO NOT want to use an extension application or similiar. Sourcecode only!

Thanks!

possible duplicate of [Copy to clipboard with Javascript in Firefox](http://stackoverflow.com/questions/21696052/copy-to-clipboard-with-javascript-in-firefox) — DavidDomain, Aug 20 '15 at 19:41

score 0 · Answer 1 · answered Aug 20 '15 at 20:49

For security reasons, Firefox doesn't allow programmatic copy to clipboard. Can you imagine if someone typed in their password which was copied to clipboard? Then ANY site anywhere could read that password out. shudder

You can mess with clipboard internally, but this doesn't ever interact with the OS clipboard. (See MDN ClipboardEvent - you can clipboard basically anything with a MIME type!).

(Using jQuery because it's easy, not because it's necessary):

$(function(){
    $( ".copyable" ).click( function( e ){
        var clipboard = new ClipboardEvent( 'copy', {
            'dataType': 'text/plain',
            'data': $(this).text()
        } );

        $( 'input' ).val( clipboard.clipboardData.getData( "text/plain" ) );
    });
});

If you run the snippet below and click the big gray box, it will copy the text contents into the input element.

$(function(){
    $( ".copyable" ).click( function( e ){
        var clipboard = new ClipboardEvent( 'copy', { 'dataType': 'text/plain', 'data': $(this).text() } );
        
        $( 'input' ).val( clipboard.clipboardData.getData( "text/plain" ) );
    });
});

.copyable{
    padding: 3em;
    
    background-color: #CCCCCC;
}

input{
    width: 95%;
    
    display: block;
    
    margin: 1em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="copyable">
    <p>Some text</p>
    <p>Some other text</p>
</div>

<input />

Copy for Clipboard in Firefox

1 Answers1