Menu
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>';
}
689
Bind the element id with a copy event and then get the selected text. You can replace or modify the text. Get the clipboard and set the new text. To get the exact formatting you need to set the type as "text/html".
click hold and drag with the mouse over what you want to copy selecting it, press ENTER to copy. Right click to paste.
Use writeText() to copy text into the clipboard. Use readText() to paste the text. Make sure you have given browser permissions for Clipboard to avoid Promise rejections.
Click on the button to copy the text from the text field. Copy to clipboardCopy text Copy Text to Clipboard Step 1) Add HTML: Example The text field --> <input type="text" value="Hello World" id="myInput"> The button used to copy the text --> <button onclick="myFunction()">Copy text</button> Step 2) Add JavaScript:
Copy Text to Clipboard Step 1) Add HTML: Example The text field --> <input type="text" value="Hello World" id="myInput"> The button used to copy the text --> <button onclick="myFunction()">Copy text</button> Step 2) Add JavaScript:
Firstly, you should set up a content editable element such as a <textarea> or <input> element, or you can create one by setting the contenteditable attribute of a text compatible element such as a <div> to true. Now you can use document.execCommand ( "copy" ) to copy any selected text from one of these elements.
text field. Try to paste the text (e.g. ctrl+v) effect. <p>Click on the button to copy the text from the field. Try to paste the text (e.g. "ctrl+v")to see the effect. How to copy text to the clipboard in React.js ?
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.)
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
