为了账号安全,请及时绑定邮箱和手机立即绑定

如何通过一次单击从两个不同的div(其中一个隐藏)复制内容,但每个div都在单独的行上?

如何通过一次单击从两个不同的div(其中一个隐藏)复制内容,但每个div都在单独的行上?

翻阅古今 2022-09-23 16:21:20

我从plumwd找到了这个很棒的代码,我真的很喜欢它,因为它的简单性,并且因为其中一个div是隐藏的,但不幸的是,它将两个内容复制到一行中:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<style> #HiddenURLdiv {display: none;}</style>



<div id="PreviewHeader">Hello stuff is here</div>

<div id="HiddenURLdiv">This one is hidden</div>

<a href="#" id="copystuff">Copy Stuff</a>

<div id="thecopiedtext"></div>



<script>

    $("#copystuff").click(function() {

    var temp = $("<input>");

    $("body").append(temp);


    var previewHeader = $("#PreviewHeader").text();

    var HiddenURLdiv = $("#HiddenURLdiv").text();

    var contentTogether = previewHeader + " " + HiddenURLdiv;


    temp.val(contentTogether).select();

    document.execCommand("copy");

    $("#thecopiedtext").text(contentTogether);

    temp.remove();

});

</script>


我已经尝试了所有我知道的断行方法,希望将每个div内容放在单独的行上,但似乎没有任何效果。


我相信你们中的许多人都知道如何使这个脚本将每个div内容复制到单独的行上,同时保持其中一个div的隐藏。


查看完整描述

2 回答

?
偶然的你

TA贡献1503条经验 获得超3个赞

  1. 不要使用,因为它只支持单行文本,并将删除换行符<input>

  2. 用于添加新行\n

  3. 添加到以呈现换行符white-space:pre#thecopiedtext

$("#copystuff").click(function() {

  var temp = $("<textarea>");

  $("body").append(temp);


  var previewHeader = $("#PreviewHeader").text();

  var HiddenURLdiv = $("#HiddenURLdiv").text();

  var contentTogether = previewHeader + "\n" + HiddenURLdiv;


  temp.val(contentTogether).select();

  document.execCommand("copy");

  $("#thecopiedtext").text(contentTogether);

  temp.remove();

});

#HiddenURLdiv {

  display: none;

}


#thecopiedtext {

  white-space: pre;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="PreviewHeader">Hello stuff is here</div>

<div id="HiddenURLdiv">This one is hidden</div>

<a href="#" id="copystuff">Copy Stuff</a>

<div id="thecopiedtext"></div>


查看完整回答
反对 回复 5天前
?
叮当猫咪

TA贡献1442条经验 获得超1个赞

如注释中所述,您可以将两者联系,另外,您应该使用或者您可以将两个元素包装在(或任何显示块标签,如)标签中,因为默认情况下具有:<br />.html()<div><p><div>display:block


$("#copystuff").click(function() {

    var temp = $("<input>");

    $("body").append(temp);


    var previewHeader = $("#PreviewHeader").text();

    var HiddenURLdiv = $("#HiddenURLdiv").text();

    var contentTogether = `<div>${previewHeader}</div><div>${HiddenURLdiv}</div>`;


    temp.val(`${previewHeader}${HiddenURLdiv}`).select();

    document.execCommand("copy");

    $("#thecopiedtext").html(contentTogether);

    temp.remove();

});

#HiddenURLdiv {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div id="PreviewHeader">Hello stuff is here</div>

<div id="HiddenURLdiv">This one is hidden</div>

<a href="#" id="copystuff">Copy Stuff</a>

<div id="thecopiedtext"></div>


查看完整回答
反对 回复 5天前
  • 2 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信