How to copy text generated by JavaScript?
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).
Update: I tested this on my machine iPad/iPhone simulator safari browser and worked for me! 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>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. 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. 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; 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.)