如何复制JavaScript生成的文本？

Question

我有一个jsfiddle代码来记录点击图片的时间和位置。它在任何桌面平台上都能正常工作，但滚动和突出显示文本块在 chrome 或 Safari 中的 iPad 上不起作用。因此，作为一种解决方法，我希望能够复制 javascript 生成的点击列表和时间，但不确定如何复制。任何想法将不胜感激。

https://jsfiddle.net/369z8Lxu

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://hecoira.leeds.ac.uk/wp-content/uploads/sites/164/2019/08/0D174AF3-1221-42A4-878E-305FD6D829BF-e1564773811882.jpeg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="IVStand" title="IVStand" href="javascript:ClickOnImageMap('IVStand');" coords="147,258,186,208" shape="rect">
    <area target="" alt="Chair" title="Chair" href="javascript:ClickOnImageMap('chair');" coords="68,262,163,343" shape="rect">
    <area target="" alt="DoorHandle" title="DoorHandle" href="javascript:ClickOnImageMap('DoorHandle');" coords="17,237,62,371" shape="rect">
    <area target="" alt="Bed" title="Bed" href="javascript:ClickOnImageMap('Bed');" coords="176,154,327,224" shape="rect">
    <area target="" alt="Window" title="Window" href="javascript:ClickOnImageMap('Window');" coords="159,119,43,8" shape="rect">
    <area target="" alt="Trolley" title="Trolley" href="javascript:ClickOnImageMap('Trolley');" coords="53,129,138,162" shape="rect">
    <area target="" alt="Sink" title="Sink" href="javascript:ClickOnImageMap('Sink');" coords="503,328,410,284" shape="rect">
    <area target="" alt="ClinicalWaste" title="ClinicalWaste" href="javascript:ClickOnImageMap('ClinicalWaste');" coords="297,327,406,374" shape="rect">
    <area target="" alt="AlcoholGel" title="AlcoholGel" href="javascript:ClickOnImageMap('AlcoholGel');" coords="399,258,504,158,504,241" shape="rect">
</map>

<p id="clicks">
Clicks:<br>
</p>

Jscript

ClickOnImageMap = function(area){
    var oldHtml = document.getElementById("clicks").innerHTML;
  var now  = new Date();
  document.getElementById("clicks").innerHTML = oldHtml + area + ' ' + now.toLocaleString() + '<br>';
}

Answer 1

我能够使用 CSS user-select 让它工作，我添加了值 all 来演示 selection，如果你在 Chrome Mac，双击并按住2秒会出现select文字和右键菜单（就是Mac模仿触摸select Mac OS).

更新：我在我的机器上测试了这个 iPad/iPhone 模拟器 safari 浏览器并为我工作！无论如何，也许有问题：

和

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    p {
      zoom: 1;
      user-select: all;
      cursor: text
    }
    
    </style>
  </head>
  <body>
  <!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://hecoira.leeds.ac.uk/wp-content/uploads/sites/164/2019/08/0D174AF3-1221-42A4-878E-305FD6D829BF-e1564773811882.jpeg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="IVStand" title="IVStand" href="javascript:ClickOnImageMap('IVStand');" coords="147,258,186,208" shape="rect">
    <area target="" alt="Chair" title="Chair" href="javascript:ClickOnImageMap('chair');" coords="68,262,163,343" shape="rect">
    <area target="" alt="DoorHandle" title="DoorHandle" href="javascript:ClickOnImageMap('DoorHandle');" coords="17,237,62,371" shape="rect">
    <area target="" alt="Bed" title="Bed" href="javascript:ClickOnImageMap('Bed');" coords="176,154,327,224" shape="rect">
    <area target="" alt="Window" title="Window" href="javascript:ClickOnImageMap('Window');" coords="159,119,43,8" shape="rect">
    <area target="" alt="Trolley" title="Trolley" href="javascript:ClickOnImageMap('Trolley');" coords="53,129,138,162" shape="rect">
    <area target="" alt="Sink" title="Sink" href="javascript:ClickOnImageMap('Sink');" coords="503,328,410,284" shape="rect">
    <area target="" alt="ClinicalWaste" title="ClinicalWaste" href="javascript:ClickOnImageMap('ClinicalWaste');" coords="297,327,406,374" shape="rect">
    <area target="" alt="AlcoholGel" title="AlcoholGel" href="javascript:ClickOnImageMap('AlcoholGel');" coords="399,258,504,158,504,241" shape="rect">
</map>

<p id="clicks">
Clicks
</p>

<script>

ClickOnImageMap = function(area){
 var oldHtml = document.getElementById("clicks").innerHTML;
  var now  = new Date();
  document.getElementById("clicks").innerHTML = oldHtml + area + ' ' + now.toLocaleString() + '<br>';
}

</script>
  </body>
</html>

Answer 2

这是一个建议，而不仅仅是对您的'copy-and-paste'请求的解决方案。由于您的困难出现在 iPads/ 较小的屏幕上，我想到也许 [输出] 的布局可以调整。例如，在每次点击时在新行上重复输出一个区域的名称是庞大的，所以我建议分组点击并简单地将 time/date 附加到再次单击该区域的日期列表。您可以在次数列表前添加一个计数器，以显示某个区域被点击的次数。

考虑到列表可能会变长，我建议设置段落高度并将 overflow 设置为 scroll/auto，这样如果您真的想阅读时间列表，你可以点击。或者，如果您愿意，您可以选择 show/hide 个日期。

我整理了一个fiddle*（当然可以根据您的意愿修改布局）来提供一个想法。请注意我没有 iPad 来测试它；我用了逻辑和我的想象力！

希望对您有所帮助

ClickOnImageMap = function(area) {
  var oldHtml = document.getElementById("clicks").innerHTML;
  var newHTML, areaclicks;
  var now = new Date();
  const area1 = 1;
  var spanid = "";


  if (oldHtml.indexOf(area) == -1) {
    var para = document.createElement("P");
    para.setAttribute("id", "" + area + "");
    var cont = document.createTextNode("");
    para.appendChild(cont);
    spanid = area + 1;
    para.innerHTML = area + " Clicks: " + '<span id= "' + spanid + '">' + area1 + '</span>' + " " + now.toLocaleString();
    //const info = document.getElementById("clicks");
    document.getElementById("clicks").appendChild(para);
  } else {

    var addto = document.getElementById(area);
    newHTML = addto.innerHTML + " " + now.toLocaleString();
    var areaclicks = ((addto.innerText.match(/,/g) || []).length) + 1;
    console.log("Clicks is " + areaclicks);
    spanid = area + 1;
    addto.innerHTML = newHTML;
    document.getElementById(spanid).innerHTML = areaclicks;

  }

}

#clicks p {
  width: 100%;
  max-height: 35px;
  overflow: auto;
}

<html>

<body>
  <!-- Image Map Generated by http://www.image-map.net/ -->
  <img src="https://hecoira.leeds.ac.uk/wp-content/uploads/sites/164/2019/08/0D174AF3-1221-42A4-878E-305FD6D829BF-e1564773811882.jpeg" usemap="#image-map">

  <map name="image-map">
    <area target="" alt="IVStand" title="IVStand" href="javascript:ClickOnImageMap('IVStand');" coords="147,258,186,208" shape="rect">
    <area target="" alt="Chair" title="Chair" href="javascript:ClickOnImageMap('Chair');" coords="68,262,163,343" shape="rect">
    <area target="" alt="DoorHandle" title="DoorHandle" href="javascript:ClickOnImageMap('DoorHandle');" coords="17,237,62,371" shape="rect">
    <area target="" alt="Bed" title="Bed" href="javascript:ClickOnImageMap('Bed');" coords="176,154,327,224" shape="rect">
    <area target="" alt="Window" title="Window" href="javascript:ClickOnImageMap('Window');" coords="159,119,43,8" shape="rect">
    <area target="" alt="Trolley" title="Trolley" href="javascript:ClickOnImageMap('Trolley');" coords="53,129,138,162" shape="rect">
    <area target="" alt="Sink" title="Sink" href="javascript:ClickOnImageMap('Sink');" coords="503,328,410,284" shape="rect">
    <area target="" alt="ClinicalWaste" title="ClinicalWaste" href="javascript:ClickOnImageMap('ClinicalWaste');" coords="297,327,406,374" shape="rect">
    <area target="" alt="AlcoholGel" title="AlcoholGel" href="javascript:ClickOnImageMap('AlcoholGel');" coords="399,258,504,158,504,241" shape="rect">
</map>

  <h3>
    Clicks
  </h3>
  <p id="clicks">

  </p>

  <!--<script>
 </script>--->
</body>

</html>

*（我输入了一个片段，只是为了显示代码。尽管它与 fiddle 中的代码相同（运行没问题），但该片段没有运行 [进入时]，即使是全屏..嗯。见fiddle.)

如何复制JavaScript生成的文本？

How to copy text generated by JavaScript?

javascript

html

jsfiddle