Copy span content including line breaks

Question

I have a span that contains text with line breaks and a function that copies this span's content to the clipboard.

When copying this data I would like to keep the line breaks so that if I paste it in another tool or page that supports HTML it still keeps the line breaks there.

Can someone here tell me if the below is set up correctly for this or if I need to change anything here ? I was especially not sure whether I can work with <br /> tags here or if I need to have the copy function replace this by something else in order to make it work as intended.

My span:

<span id="fldAll"></span>

How I am filling the span (part of a longer function):

$('#fldAll').html( "Account Type: " + $('#fldAccType').text() + "<br />Business Type: " + $('#fldBusType').text() + "<br />Name: " + $('#fldName').text() + "<br />DOB: " + $('#fldDOB').text() + "<br />Home Address: " + $('#fldHomeAddress').text() + "<br />Business Address: " + $('#fldBusAddress').text() + "<br />Business Name: " + $('#fldBusName').text() + "<br />Business Title: " + $('#fldBusTitle').text() + "<br />KYC Status: " + $('#fldKycStatus').text());

My copy function:

function copyAll(el) {
    var output = $('#fldAll').html();
    window.clipboardData.setData('Text', output);
    window.status="Selected data has been copied to clipboard";
    setTimeout("window.status=''", 3000)
}

Many thanks for any help with this, Tim.

Answer 1

I have make one jsFiddle http://jsfiddle.net/siddhapura/FuV3H/ which copy from span element.

I have use ZeroClipboard plugin for Copy and paste and '\n' for line break into copy text.

Code sample

HTML CODE

<span id="fldAll"></span><button id="copy-button" data-clipboard-target="fldAll" data-clipboard-text="">Copy</button>

JS CODE

jQuery('#fldAll').html( "Account Type: " + $('#fldAccType').text() + "\n<br />Business Type: " + $('#fldBusType').text() + "\n<br />Name: " + $('#fldName').text() + "\n<br />DOB: " + $('#fldDOB').text() + "<br />Home Address: " + $('#fldHomeAddress').text() + "\n<br />Business Address: " + $('#fldBusAddress').text() + "\n<br />Business Name: " + $('#fldBusName').text() + "\n<br />Business Title: " + $('#fldBusTitle').text() + "\n<br />KYC Status: " + $('#fldKycStatus').text());

var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ) {
// alert( "ZeroClipboard SWF is ready!" );

client.on( "aftercopy", function( event ) {
   // `this` === `client`
   // `event.target` === the element that was clicked
   event.target.style.display = "none";
   alert("Copied text to clipboard: " + event.data["text/plain"] );
 } );
} );