复制跨度内容,包括换行符

时间:2014-04-25 06:31:20

标签: jquery html clipboard line-breaks

我的跨度包含带换行符的文本和将此跨区内容复制到剪贴板的功能。

复制这些数据时,我想保留换行符,这样如果我将其粘贴到另一个支持HTML的工具或页面中,它仍会保留换行符。

有人可以告诉我以下是否正确设置了这个或者我是否需要在此更改任何内容?我特别不确定我是否可以在这里使用<br />标签,或者我是否需要使用复制功能将其替换为其他内容以使其按预期工作。

我的范围:

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

我如何填充范围(更长功能的一部分):

$('#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());

我的复制功能:

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)
}

非常感谢你提供任何帮助,蒂姆。

1 个答案:

答案 0 :(得分:1)

我已经制作了一个jsFiddle http://jsfiddle.net/siddhapura/FuV3H/,它可以从span元素中复制。

我使用ZeroClipboard插件进行复制和粘贴以及&#39; \ n&#39;换行复制文本。

代码示例

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"] );
 } );
} );