{"id":55848,"date":"2022-05-19T03:01:31","date_gmt":"2022-05-18T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55848"},"modified":"2022-05-19T07:44:14","modified_gmt":"2022-05-18T21:44:14","slug":"keyboard-based-cursor-content-copy-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-content-copy-tutorial\/","title":{"rendered":"Keyboard Based Cursor Content Copy Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Based Cursor Content Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.jpg\" title=\"Keyboard Based Cursor Content Copy Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Keyboard Based Cursor Content Copy Tutorial<\/p><\/div>\n<p>The <a target=_blank title='Event onkeydown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onkeydown.asp'>&#8220;onkeydown&#8221;<\/a> keyboard event can involve in its logic three <a target=_blank title='Mouse event information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/obj_mouseevent.asp'>mouse event<\/a> (event object) property usages that caught our interest recently &#8230;<\/p>\n<ul>\n<li><a target=_blank title='event.altKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_altkey.asp'>event.altKey<\/a><\/li>\n<li><a target=_blank title='event.shiftKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_shiftkey.asp'>event.shiftKey<\/a><\/li>\n<li><a target=_blank title='event.ctrlKey information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_ctrlkey.asp'>event.ctrlKey<\/a><\/li>\n<\/ul>\n<p> &#8230; and we wanted to have &#8220;keyboard&#8221; meets &#8220;mouse&#8221; events, along with the brilliance of <a target=-blank title='Lorem Picsum' href='https:\/\/picsum.photos\/'>Lorem Picsum<\/a> regarding background image randomosity and quality, working with HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;div id=mydiv onfocus='setTimeout(alte, 1000);' onclick='stamp(this);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https:\/\/picsum.photos\/ Lorem Picsum' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' data-onkeypress=xycursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; in a way we hadn&#8217;t tried before that called on some inhouse cursor SVG creations <font size=1>(and so is, alas, just a non-mobile fully featured experience)<\/font>, in the sense that &#8230;<\/p>\n<ol>\n<li>keyboard helps creating the &#8220;what&#8221; regarding content &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var lastkeymodifier=''<br \/>\n  var lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n<br \/>\n  function cursorlook(evt) {<br \/>\n    if (evt.altKey) {<br \/>\n      if (lastkeymodifier != 'alt') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Alt\\\\01f3d5&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, progress\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='alt';<br \/>\n      }<br \/>\n    } else if (evt.ctrlKey) {<br \/>\n      if (lastkeymodifier != 'ctrl') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Ctrl\\\\01f333&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, pointer\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='ctrl';<br \/>\n      }<br \/>\n    } else if (evt.shiftKey) {<br \/>\n      if (lastkeymodifier != 'shift') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Shift\\\\01f389&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, grab\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='shift';<br \/>\n      }<br \/>\n    } else {<br \/>\n      if (lastkeymodifier != '') {<br \/>\n        lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n        document.head.innerHTML+='&lt;style&gt; html {  cursor: ' + lastcursor + '; } &lt;\/style&gt;';<br \/>\n        lastkeymodifier='';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>mouse <a target=_blank title='Event onmousedown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onmousedown.asp'>&#8220;onmousemove&#8221;<\/a> or <a target=_blank title='Event ontouchdown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_touchmove.asp'>&#8220;ontouchmove&#8221;<\/a> helps with the &#8220;where&#8221; regarding content above &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n<br \/>\n  function xycursorlook(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/li>\n<li>preparations for &#8220;onclick&#8221; way a cursor can be plonked into (real lasting) content &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  var lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'&gt;&lt;text y='80%'&gt;Shift\/Alt\/Ctrl\\\\002753&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, crosshair\";<br \/>\n  var pos3=-1, pos4=-1;<br \/>\n  var subdiv=1;<br \/>\n  var lastpos3=-2, lastpos4=-1;<br \/>\n  var allowable=false;<br \/>\n  <br \/>\n  function stamp(divo) {<br \/>\n    if (('' + pos3).indexOf('-') == -1) {<br \/>\n    if (allowable) {<br \/>\n    \/\/if (allowed) {<br \/>\n    \/\/allowed=false;<br \/>\n    \/\/setTimeout(reseta, 2000);<br \/>\n    divo.innerHTML+='&lt;div id=div' + subdiv + ' style=\"position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;\"&gt;&lt;\/div&gt;&lt;style&gt; #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } &lt;\/style&gt;';<br \/>\n    subdiv++;<br \/>\n    \/\/console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);<br \/>\n    \/\/console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);<br \/>\n    lastpos3=pos3;<br \/>\n    lastpos4=pos4;<br \/>\n    \/\/}<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code>\n<\/ol>\n<p> &#8230; with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html_GETME\">&#8220;proof of concept&#8221; body_mouse_deepdive.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_mouse_deepdive.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55848' onclick='var dv=document.getElementById(\"d55848\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onkeydown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55848' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The &#8220;onkeydown&#8221; keyboard event can involve in its logic three mouse event (event object) property usages that caught our interest recently &#8230; event.altKey event.shiftKey event.ctrlKey &#8230; and we wanted to have &#8220;keyboard&#8221; meets &#8220;mouse&#8221; events, along with the brilliance of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-content-copy-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2432,155,260,2127,342,576,652,672,673,3982,812,861,1705,2219,2723,894,997,2232,2587,1226,1319],"class_list":["post-55848","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-alt","tag-body","tag-control","tag-cursor","tag-div","tag-html","tag-javascript","tag-key","tag-keyboard","tag-lorem-picsum","tag-mouse","tag-onclick","tag-onkeydown","tag-onmousemove","tag-ontouchmove","tag-overlay","tag-programming","tag-property","tag-shift","tag-svg","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55848"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=55848"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55848\/revisions"}],"predecessor-version":[{"id":55863,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55848\/revisions\/55863"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}