使用折线复制到剪贴板 [英] Copy to clipboard with break line
问题描述
我想将文字复制到剪贴板但是换行。
I want to copy a text to clipboard but in a new line.
问题:
如果您点击代码段中的按钮并粘贴到记事本中,这就是您要获得的:
If you click the button in the snippet and paste in the notepad this is what you gonna get:
名称: testSurname:testEmail:test@gmail.comAddress:testCity:testCountry:nullAd类别:testPlan:null网站:公司名称:testΜήνυμα:test
Name: testSurname: testEmail: test@gmail.comAddress: testCity: testCountry: nullAd Category: testPlan: nullWebsite: Company name: testΜήνυμα: test
我想要的是什么:
如果可能,我希望在换行符中复制文字。与复制时相同:
I want, if possible, to copy text in a newline. The same as it is when you copy it:
姓名:test
姓:test
< br>电子邮件:test@gmail.com
...
Name: test
Surname: test
Email: test@gmail.com
...
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
$( "#FailCopy" ).click(function() {
alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--text that i want to copy-->
<h2>Div #error-details: the text I want to copy to clipboard:</h2>
<er id="error-details">Name: test<br>Surname: test<br>Email: test@gmail.com<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>
<br><br>
<button id="FailCopy" type="button"
onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>
我还尝试用<$替换< br>
c $ c> \ n 和 \\\\ n
将以下css规则添加到我的div: white-space:pre-wrap;
没有任何成功的迹象。
I have also tried to replace <br>
with \n
and \r\n
by adding the following css rule to my div: white-space:pre-wrap;
without any signs of success.
推荐答案
你有几个代码问题。
代码中的第一个问题是 $(元素).text()
jquery文本()从html中删除代码,包括< br>
标记。因此,剪贴板文本中没有换行符,因为所有html换行符都被删除了......所以无需替换。
First problem in your code is the $(element).text()
jquery text() strips your code from html including the <br>
tags. So there is no newlines in the clipboard text since all html newlines are stripped away.. so nothing to replace.
如果你想保留< ; br>
作为换行符,您需要使用 .html()
并更加手动地解析文本。
If you want to keep <br>
as newlines you need to use .html()
and parse your text more manually.
第二个问题是您使用< input>
标记。 < input>
标签只有单行,所以你不能有任何新行。您需要使用< textarea>
进行转换。
Second problem is that you use <input>
tag. <input>
tag is only single lines so u cant have any newline in there. you need to use <textarea>
for the conversion.
最后一个问题如上所述,您也应该对Windows用户使用 \\\\ n
。
The last problem is as above that you also should use \r\n
for windows users.
我使用工作版本更新了您的代码段。
I updated your snippet with a working version.
function copyToClipboard(element) {
var $temp = $("<textarea>");
var brRegex = /<br\s*[\/]?>/gi;
$("body").append($temp);
$temp.val($(element).html().replace(brRegex, "\r\n")).select();
document.execCommand("copy");
$temp.remove();
}
$( "#FailCopy" ).click(function() {
alert("Well done! div #error-details has been copy to your clipboard, now paste it in the notepad or email!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--text that i want to copy-->
<h2>Div #error-details: the text I want to copy to clipboard:</h2>
<er id="error-details">Name: test<br>Surname: test<br>Email: test@gmail.com<br>Address: test<br>City: test<br>Country: null<br>Ad Category: test<br>Plan: null<br>Website: <br>Company name: test<br>Μήνυμα: test</er>
<br><br>
<button id="FailCopy" type="button"
onclick="copyToClipboard('er#error-details')">Copy div to clipboard</button>
这篇关于使用折线复制到剪贴板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!