How to copy text generated by JavaScript?

Question

I have a jsfiddle code to record the time and location of a click on an image. It works fine on any desktop platforms but scrolling and highlighting chunks of the text don’t work on iPad in chrome or safari. 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. Any thoughts would be much appreciated.

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>';
}

I recall a similar issue I had before, essentially it was something relating to certain elements not being clickable on iOS. Does this work on an iPhone or just problematic on iPad? — Phix, Feb 14 '20 at 20:57
Good point. I haven't got an iPhone to test it on but it's only going to be used on an iPad. — HCAI, Feb 15 '20 at 13:13
I don't have an iPad but I used the developer tools emulator to run the jsfiddle in iPad + Chrome (Version 79.0.3945.130) and it seems to be working fine for me. — AndrewL64, Feb 16 '20 at 17:51
I should clarify. It works but once the list of recorded clicks goes beyond the end of the page I can't retrieve it nor copy it. — HCAI, Feb 16 '20 at 20:48
Maybe i didn't understand the issue very well, you need your users to copy all the clicks recorded in `#clicks`, correct? If so why not making a button that when clicked saves the text of `#clicks` into the clipboard? Like google does when copying the code for analytics, or a link to share for a drive folder and so on — Daniel, Feb 18 '20 at 09:25

ROOT · Accepted Answer · 2020-02-21T21:21:08.530

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>

Thank you very much for your answer. It works well on the desktop but still doesn’t allow me to click and copy on the iPad. I’m not sure why this is though. — HCAI, Feb 21 '20 at 16:23
@HCAI, I used the simulator to test this and it worked for me, not sure what might the problem, anyway I hope my answer directs you to the right path to solve this issue. — ROOT, Feb 21 '20 at 21:23

Rachel Gallen · Answer 2 · 2020-02-19T22:32:11.230

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.)

Just an addendum.. I noticed it hard to find your clinical waste/sink and eventually discovered that the clinical waste was actually on the floor on the picture (I expected it be the yellow bucket).. you might wanna look at that. Also you could probably make the pic slightly smaller in height ; the window area is fairly big and there's nothing else along there [I know they relate to only this image.. but still..] — Rachel Gallen, Feb 20 '20 at 12:44
By the way, if you wrote the generated javascript 'click' output to the console, you could save the console.log to a file. There's a few answers re. how to save the console on the stack. [example](https://stackoverflow.com/questions/11849562/how-to-save-the-output-of-a-console-logobject-to-a-file) This [superuser one](https://superuser.com/questions/1417985/capture-console-log-to-a-file) is newer — Rachel Gallen, Feb 20 '20 at 13:00
Thank you very much for your answer and explanation, it's much appreciated. I think the format of a long list was ideal for post-processing of the times. It's not to say I can't handle this format but it would require a few extra steps. — HCAI, Feb 21 '20 at 08:50
@HCAI You are welcome. I guess you could add a break tag before the date, and show/hide the dates on screen (they could still be written neatly to the console). Code is modifiable/open to tweaks, like I said. Just some food for thought! :) — Rachel Gallen, Feb 21 '20 at 08:55
I have been able to test your code snippet out on an iPad. It still doesn’t let me select any of the clicks. I wonder if this is a jsfiddle problem. Hmm — HCAI, Feb 21 '20 at 16:25
No no, the succession of clicks are generated fine but even so, I can't copy them by long pressing on them on the ipad. It works fine on any desktop envieonwmnt I've tried. Im using ios 13.14 and safari. Strange no? — HCAI, Feb 21 '20 at 17:43
IOS is 12.1.4 not 13.1.4, sorry. Do you know. I've just tried copying any java script on w3schools and it gives me the same issue on the ipad. It won't let me highlight or copy more than one letter. Bizarre — HCAI, Feb 21 '20 at 17:55
@HCAI Jsfiddle does present problems on mobile, but if you wanna test it for real, e.g. on a sample page, take a look at [this question](https://stackoverflow.com/a/27413909) which looks at longpress and javascript (there are several good answers). Try [this fiddle](https://jsfiddle.net/5xrtx69z/1/) on ipad/ on mobile (this was one of the answers) and see if lets you select — Rachel Gallen, Feb 21 '20 at 17:56
@HCAI apparently your issue with copy-on-longpress on ios 12 is a [known issue](https://meta.discourse.org/t/ios-12-selecting-text-quoting-not-working-after-using-the-composer/98571) and a solution was not included in the patch release at the time of the linked post, although a solution seemed to have been found. It may ve fixed in ios 13, which also uses 3-finger pinch to copy (dunno if they made long press redundant, but i'm not an iphone girl).. Read the link anyway, and update your firmware — Rachel Gallen, Feb 21 '20 at 18:49

How to copy text generated by JavaScript?

2 Answers2