如何复制 JavaScript 生成的文本？
[英]How to copy text generated by JavaScript?
问题描述
I have a jsfiddle code to record the time and location of a click on an image.
我有一个 jsfiddle 代码来记录单击图像的时间和位置。 It works fine on any desktop platforms but scrolling and highlighting chunks of the text don't work on iPad in chrome or safari.它在任何桌面平台上都可以正常工作，但滚动和突出显示文本块在 chrome 或 safari 中的 iPad 上不起作用。 So as a workaround, I'd like to be able to copy the list of clicks and times that the javascript generates but not sure how.因此，作为一种解决方法，我希望能够复制 javascript 生成但不确定如何复制的点击次数和时间列表。 Any thoughts would be much appreciated.任何想法将不胜感激。
https://jsfiddle.net/369z8Lxu 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>';
}
2 个解决方案
解决方案1
4 已采纳 2020-02-18 20:11:38
I was able to have it working using CSS user-select , I added the value all to demonstrate the selection, if you are testing it on Chrome Mac, use double click and hold for 2 seconds and it will select the text and right click menu will appear (that how Mac imitate touch select on Mac OS).我能够使用 CSS user-select让它工作，我添加了值all来演示选择，如果你在 Chrome Mac 上测试它，使用双击并按住 2 秒钟，它将选择文本和右键单击菜单将出现（Mac 如何模仿 Mac OS 上的触摸选择）。
Update : I tested this on my machine iPad/iPhone simulator safari browser and worked for me!更新：我在我的机器 iPad/iPhone 模拟器 safari 浏览器上测试了这个并为我工作！ anyway maybe there is something wrong:无论如何，也许有什么问题：
and和
<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>
解决方案2
2 2020-02-19 21:56:54
This is a suggestion more than a solution to your 'copy-and-paste' request.这是一个建议多解决您的“复制-粘贴”的要求。 As your difficulty occurs on iPads/ smaller screens, it occurred to me that maybe the layout [of the output] could stand to be adjusted.由于您的困难出现在 iPad/较小的屏幕上，我想到也许 [输出] 的布局可以进行调整。 For instance, repetitively outputting the name of an area on a new line on every click is bulky, so I would suggest grouping the clicks and simply appending the time/date to the end of that area's list of dates when it is clicked again.例如，在每次点击时在新行上重复输出区域的名称是庞大的，因此我建议将点击分组并在再次点击时简单地将时间/日期附加到该区域的日期列表的末尾。 You could add a counter before the list of times to display a count of the number of times an area has been clicked.您可以在次数列表之前添加一个计数器，以显示某个区域被点击的次数。
Bearing in mind that the list could get long, I would suggest setting a height on paragraphs and setting the overflow to scroll/auto so that if you really want to read a list of times, you can tap down.记住列表可能会很长，我建议设置段落高度并将overflow设置为滚动/自动，这样如果您真的想阅读时间列表，您可以点击向下。 Or you could elect to show/hide dates if you wish.或者，如果您愿意，您可以选择显示/隐藏日期。
I put together a fiddle * (layout modifiable as you wish of course) to give an idea.我整理了一个小提琴*（当然可以根据您的意愿修改布局）来提供一个想法。 Please note I didn't have an iPad to test it out;请注意，我没有 iPad 来测试它； I used logic and my imagination!我使用了逻辑和我的想象力！
Hope this helps希望这可以帮助
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>
*(I entered a snippet, just to show the code. Even though it's the same code as in the fiddle (which runs fine), the snippet didn't run [at time of entering], even in full screen.. hmmm. See fiddle.) *（我输入了一个片段，只是为了显示代码。尽管它与小提琴中的代码相同（运行良好），但该片段没有运行 [在输入时]，即使在全屏模式下......嗯。见小提琴。）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.