{"id":58580,"date":"2023-03-12T03:01:51","date_gmt":"2023-03-11T17:01:51","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=58580"},"modified":"2023-03-12T06:28:34","modified_gmt":"2023-03-11T20:28:34","slug":"keyboard-typing-practice-choices-name-word-div-links-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-typing-practice-choices-name-word-div-links-tutorial\/","title":{"rendered":"Keyboard Typing Practice Choices Name Word Div Links Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Typing Practice Choices Name Word Div Links Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste_resize.jpg\" title=\"Keyboard Typing Practice Choices Name Word Div Links Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Keyboard Typing Practice Choices Name Word Div Links Tutorial<\/p><\/div>\n<p>At this blog, we&#8217;ve long been interested in the relative talents of the HTML textarea and div element types, as you can read about at <a target=_blank title='HTML Div Overlay Jigsaw Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-overlay-jigsaw-talents-primer-tutorial\/'>HTML Div Overlay Jigsaw Talents Primer Tutorial<\/a>.<\/p>\n<p>And today, on top of the &#8220;so far only textarea&#8221; functionality of yesterday&#8217;s <a title='Keyboard Typing Practice Choices Tutorial' href='#ktpct'>Keyboard Typing Practice Choices Tutorial<\/a>, for the &#8220;Names List&#8221; and &#8220;Words List&#8221; input data source choices we introduce &#8230;<\/p>\n<ul>\n<li>an &#8220;almost totally&#8221; overlayed left hand side div element which can be used to show the same data (as the overlayed textarea), but in the form of &#8220;a&#8221; links, that when clicked, can send the user off to useful &#8220;side gig&#8221; webpages of relevance &#8230;<\/li>\n<li>the resultant underlayed left hand side textarea element has a right sliver still showing which can be used to deploy resize Javascript logic &#8230;<br \/>\n<code><br \/>\nfunction preresize() {<br \/>\n   resizeta(document.getElementById(\"yourta\"));<br \/>\n}<br \/>\n<br \/>\nfunction resizeta(tao) {<br \/>\n    var rectth = document.getElementById(\"lhs\").getBoundingClientRect();<br \/>\n    var recttd = document.getElementById(\"lhstd\").getBoundingClientRect();<br \/>\n    var rectta = document.getElementById(\"yourta\").getBoundingClientRect();<br \/>\n    var rectdiv = document.getElementById(\"yourdiv\").getBoundingClientRect();<br \/>\n    if (eval('' + swidth) &lt; 0) { swidth=eval('' + rectta.width);   }<br \/>\n      console.log('Swidth=' + swidth + ' and rectta.width=' + rectta.width);<br \/>\n    if (eval('' + rectta.width) &lt; eval('' + swidth) || eval('' + rectta.width) &gt; eval('' + swidth)) {<br \/>\n    if (eval('' + swidth) &gt; 0 && Math.abs(eval('' + rectta.width) - eval('' + swidth)) &gt; 10) {<br \/>\n      var lessw=eval(eval('' + swidth) - eval('' + rectta.width));<br \/>\n      location.href=document.URL.split('#')[0].split('&swidth=')[0] + '&swidth=' + eval(swidth - lessw) + 'px';<br \/>\n      console.log('lessw=' + lessw + ' and swidth=' + swidth);<br \/>\n      document.getElementById(\"lhs\").style.width='' + eval(eval('' + rectth.width) - eval('' + lessw)) + 'px';<br \/>\n      document.getElementById(\"lhstd\").style.width='' + eval(eval('' + recttd.width) - eval('' + lessw)) + 'px';<br \/>\n      console.log('lhs=' + eval(eval('' + recttd.width) - eval('' + lessw)));<br \/>\n      document.getElementById(\"yourdiv\").style.width='' + eval(eval('' + rectdiv.width) - eval('' + lessw)) + 'px';<br \/>\n      console.log('divw=' + eval(eval('' + rectdiv.width) - eval('' + lessw)));<br \/>\n      swidth-=lessw;<br \/>\n      console.log('swidth=' + swidth);<br \/>\n      document.getElementById(\"sone\").innerHTML='&lt;br&gt;';<br \/>\n      document.getElementById(\"stwo\").innerHTML='&lt;br&gt;';<br \/>\n      document.getElementById(\"sthree\").innerHTML='&lt;br&gt;';<br \/>\n      document.getElementById(\"sfour\").innerHTML='&lt;br&gt;';<br \/>\n      document.getElementById(\"yourta\").style.visibility='hidden';<br \/>\n      document.getElementById(\"lhs\").style.textAlign='left';<br \/>\n      \/\/var rectrta = document.getElementById(\"myta\").getBoundingClientRect();<br \/>\n      \/\/document.getElementById(\"yourta\").style.top='' + rectrta.top + 'px';<br \/>\n      \/\/document.getElementById(\"yourdiv\").style.top='' + rectrta.top + 'px';<br \/>\n      copyTextareaStyling();<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\nfunction osvh() {<br \/>\n    document.getElementById(\"yourta\").style.visibility='hidden';<br \/>\n}<br \/>\n<br \/>\nif (cnamelist == '' && cwordlist == '' && cphraselist == '') {<br \/>\n  setInterval(noneagain, 5000);<br \/>\n} else if (cnamelist != '' || cwordlist != '') {<br \/>\n  setInterval(preresize, 8000);<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Combining talents, we think?!  Also in the &#8220;resize&#8221; line of thinking we have a document.body onresize event function &#8230;<\/p>\n<p><code><br \/>\nfunction copyTextareaStyling() {<br \/>\n    if (btn == '' || (cnamelist == '' && cwordlist == '')) { return ''; }<br \/>\n    \/\/alert(98);<br \/>\n    var output = document.getElementById(\"yourta\"), divelem = document.getElementById(\"yourdiv\");<br \/>\n    var recto = output.getBoundingClientRect();<br \/>\n    if (eval('' + swidth) &lt; 0) { swidth=eval('' + recto.width);   }<br \/>\n    \/\/alert(swidth);<br \/>\n    if (divelem) { \/\/ thanks to ideas off http:\/\/stackoverflow.com\/questions\/12266320\/copy-div-content-to-textarea-or-text-with-the-same-font-family-style<br \/>\n      divelem.style.fontFamily = window.getComputedStyle(output,null).fontFamily || output.style.fontFamily || output.currentStyle.getCurrentProperty('font-family');<br \/>\n      divelem.style.fontSize = window.getComputedStyle(output,null).fontSize || output.style.fontSize || output.currentStyle.getCurrentProperty('font-size');<br \/>\n      divelem.style.border = window.getComputedStyle(output,null).border || output.style.border || output.currentStyle.getCurrentProperty('border');<br \/>\n      divelem.style.padding = window.getComputedStyle(output,null).padding || output.style.padding || output.currentStyle.getCurrentProperty('padding');<br \/>\n      divelem.style.margin = window.getComputedStyle(output,null).margin || output.style.margin || output.currentStyle.getCurrentProperty('margin');<br \/>\n      divelem.style.overflow = window.getComputedStyle(output,null).overflow || output.style.overflow || output.currentStyle.getCurrentProperty('overflow');<br \/>\n    }<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      divelem.style.textAlign='right';<br \/>\n    }<br \/>\n    divelem.style.zIndex='67';<br \/>\n    divelem.style.position='absolute';<br \/>\n    divelem.style.top='' + recto.top + 'px';<br \/>\n    divelem.style.left='' + recto.left + 'px';<br \/>\n    divelem.style.width='' + eval(-10 + eval('' + recto.width)) + 'px';<br \/>\n    divelem.style.height='' + eval(1 + eval('' + recto.height)) + 'px';<br \/>\n    divelem.style.backgroundColor='rgba(50,255,255,0.5)';<br \/>\n    var tlines=output.value.split(String.fromCharCode(10));<br \/>\n    for (var itl=0; itl&lt;tlines.length; itl++) {<br \/>\n      if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      divelem.innerHTML+='&lt;a style=\"text-decoration-style:dotted;text-decoration-thickness:1px;\" target=_blank title=\"Thanks to thefreedictionary.com and behindthename.com\" href=\"' + btn + tlines[itl] + '\"&gt;' + tlines[itl] + '&lt;\/a&gt;&lt;br&gt;';<br \/>\n      } else {<br \/>\n      divelem.innerHTML+='&lt;a style=\"text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;cursor:pointer;\" target=_blank onclick=\"if (wo) { if (!wo.closed) { wo.close(); } wo=null; } wo=window.open(this.title,' + \"'_blank','top=100,left=\" + eval(-600 + eval('' + screen.width)) + \",width=600,height=600'\" + ');\" data-title=\"Thanks to thefreedictionary.com and behindthename.com\" title=\"' + btn + tlines[itl] + '\" data-href=\"' + btn + tlines[itl] + '\"&gt;' + tlines[itl] + '&lt;\/a&gt;&lt;br&gt;';<br \/>\n      }<br \/>\n    }<br \/>\n    output.style.color='transparent';<br \/>\n    divelem.style.display='block';<br \/>\n    setTimeout(osvh, 30000); \/\/output.style.visibility='hidden';<br \/>\n    return '';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; as well.  For mobile users, for the three new input modes introduced yesterday, we text align the left hand textarea (or, now, div) content to be &#8220;right&#8221; justified, so that it has a chance of being in view as the user focuses on the right hand textarea to do their keyboard typing work.<\/p>\n<p>So feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html---GETME\" title=\"no_copy_paste.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html---GETME\" title=\"no_copy_paste.htm\">no_copy_paste.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.htm\" title=\"Click picture\">Keyboard Typing Practising web application<\/a> you can <a href='#ifncp'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-typing-practice-name-word-div-links-tutorial\/'>Keyboard Typing Practice Choices Name Word Div Links Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ktpct'>Previous relevant <a target=_blank title='Keyboard Typing Practice Choices Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-typing-practice-choices-tutorial\/'>Keyboard Typing Practice Choices Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Typing Practice Choices Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste_choices.jpg\" title=\"Keyboard Typing Practice Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Keyboard Typing Practice Choices Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Keyboard Typing Practice Tutorial' href='#ktpt'>Keyboard Typing Practice Tutorial<\/a>&#8216;s web application gets improved today by adding to the variety of input typing ideas on top of the default &#8230;<\/p>\n<ul>\n<li>quotes (thanks to <a target=_blank title='goodreads' ... thanks' href='https:\/\/www.goodreads.com\/quotes'>https:\/\/www.goodreads.com\/quotes<\/a>) &#8230; with &#8230;<\/li>\n<li>random thoughts (thanks to <a target=_blank title='https:\/\/randomthingstodo.com\/thoughts' href='https:\/\/randomthingstodo.com\/thoughts'>https:\/\/randomthingstodo.com\/thoughts<\/a>) &#8230; and &#8230;<\/li>\n<li>news headline (thanks to <a target=_blank title='https:\/\/newsapi.org' href='https:\/\/newsapi.org'>https:\/\/newsapi.org<\/a>)<\/li>\n<\/ul>\n<p> &#8230; input data choices, that last option&#8217;s output being in JSON format, and so asking us to convert JSON to HTML.  Luckily for us, we can use a global substitution logic set and succeed because the HTML is not needed for display purposes but just as a data source that holds together in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/remote_files.php------GETME\">recently changed<\/a> <a target=_blank title='remote_files.php' href='http:\/\/www.rjmprogramming.com.au\/remote_files.php------GETME'>remote_files.php<\/a> (usage of PHP fopen URL <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/remote_files.php\" title=\"Click picture\">web application<\/a>) &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$isjson=false;<br \/>\n<br \/>\nfunction lastjson($intl) {<br \/>\n  global $isjson;<br \/>\n  $outtl=$intl;<br \/>\n  if ($isjson) {<br \/>\n   $huhs=explode(']\"', $intl);<br \/>\n   if (sizeof($huhs) &gt; 1) {<br \/>\n     if (trim($huhs[1]) != \"\") {<br \/>\n       $outtl=\"\";<br \/>\n       for ($i=0; $i&lt;sizeof($huhs); $i++) {<br \/>\n         $outtl.='\"' . str_replace(\"\\\\\" . 'n', '&lt;br&gt;', str_replace(\"\\\\\" . 'r' . \"\\\\\" . 'n', '&lt;br&gt;',  explode('\"', explode(']\"', $intl)[$i] )[-1 + sizeof(explode('\"', explode(']\"', $intl)[$i]))]   )) . ']\"&lt;br&gt;';<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n  }<br \/>\n  return $outtl;<br \/>\n}<br \/>\n<br \/>\nfunction fixforjson($iln) {<br \/>\n  global $isjson;<br \/>\n  if ($isjson) {<br \/>\n    $wasiln=$iln;<br \/>\n    $iln=str_replace('},{','&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td&gt;',$iln);<br \/>\n    $iln=str_replace('}]}','&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;',$iln);<br \/>\n    $iln=str_replace('{[{','&lt;table&gt;&lt;tr&gt;&lt;td&gt;',$iln);<br \/>\n    $iln=str_replace(':[{',':&lt;\/td&gt;&lt;\/tr&gt;&lt;\/thead&gt;&lt;tr&gt;&lt;td&gt;',$iln);<br \/>\n    if (substr($iln,0,1) == '{') { $iln='&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;' . substr($iln,1); }<br \/>\n    $iln=str_replace('\":{','\":&lt;span&gt;',$iln);<br \/>\n    $iln=str_replace('},','&lt;\/span&gt;,',$iln);<br \/>\n    $iln=str_replace(',\"','&lt;\/td&gt;&lt;td&gt;\"',$iln);<br \/>\n    $iln=str_replace('&gt;\"',' class=\"',$iln);<br \/>\n    $iln=str_replace('\":','\"&gt;',$iln);<br \/>\n    \/\/if (file_exists('iln.html')) {<br \/>\n    \/\/file_put_contents('iln.html', file_get_contents('iln.html') . \"\\n\\n\" . $iln . \"\\n\\n\" . $wasiln);<br \/>\n    \/\/} else {<br \/>\n    \/\/file_put_contents('iln.html', $iln . \"\\n\\n\" . $wasiln);<br \/>\n    \/\/}<br \/>\n  }<br \/>\n  return $iln;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; worked via a new dropdown (select) HTML element in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html--GETME\" title=\"no_copy_paste.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html--GETME\" title=\"no_copy_paste.htm\">no_copy_paste.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.htm\" title=\"Click picture\">Keyboard Typing Practising web application<\/a> you can <a href='#ifncp'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-typing-practice-choices-tutorial\/'>Keyboard Typing Practice Choices Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ktpt'>Previous relevant <a target=_blank title='Keyboard Typing Practice Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-typing-practice-tutorial\/'>Keyboard Typing Practice Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Keyboard Typing Practice Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/keyboard_typing_practice.jpg\" title=\"Keyboard Typing Practice Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Keyboard Typing Practice Tutorial<\/p><\/div>\n<p>Yes, as a lot of you will have guessed, from <a title='Paste Disabling Primer Tutorial' href='#pdpt'>Paste Disabling Primer Tutorial<\/a>, that today we use it in a new &#8220;Keyboard Typing Practice&#8221; web application, knowing that we&#8217;ll be testing typing rather than &#8220;copy\/pasting&#8221;.<\/p>\n<p>And another <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/remote_files.php------GETME\">recently changed<\/a> <a target=_blank title='remote_files.php' href='http:\/\/www.rjmprogramming.com.au\/remote_files.php------GETME'>remote_files.php<\/a> (usage of PHP fopen URL <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/remote_files.php\" title=\"Click picture\">web application<\/a>) last talked about at <a target=_blank title='PHP Remote Files Refined Containing Attribute Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-remote-files-refined-containing-attribute-tutorial\/'>PHP Remote Files Refined Containing Attribute Tutorial<\/a> joins us, helping us randomize a quote that the user is asked to type, and we calculate the user &#8230;<\/p>\n<ul>\n<li>typing <i>words per minute<\/i> rate<\/li>\n<li>typing <i>characters per minute<\/i> rate<\/li>\n<li>typing <i>accuracy<\/i> percentage &#8230; aim for 100%<\/li>\n<li>typing <i>retake<\/i> percentage &#8230; aim for 0%<\/li>\n<\/ul>\n<p> &#8230; as guidelines the user can note to monitor for improvement.<\/p>\n<p>So try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html-GETME\" title=\"no_copy_paste.html\">&#8220;how we got there from proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html-GETME\" title=\"no_copy_paste.htm\">no_copy_paste.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.htm\" title=\"Click picture\">Keyboard Typing Practising web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=ifncp src=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.htm\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-typing-practice-tutorial\/'>Keyboard Typing Practice Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pdpt'>Previous relevant <a target=_blank title='Paste Disabling Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/paste-disabling-primer-tutorial\/'>Paste Disabling Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Paste Disabling Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.jpg\" title=\"Paste Disabling Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Paste Disabling Primer Tutorial<\/p><\/div>\n<p>We have an unusual request to make to even consider a new project, which we&#8217;ll reveal over time, and which we want to take on, today.  It&#8217;s a requirement to disable any &#8220;paste&#8221; parts (of the copy\/cut\/paste paradigm) to the use of any HTML elements the event logic is applied too.<\/p>\n<p>Luckily for us a <a target=_blank title='Google search of set textarea to not allowing copy and paste' href='https:\/\/www.google.com\/search?q=set+textarea+to+not+allowing+copy+and+paste&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=AJOqlzVofxNPAu2UWNRy8gZUww6LxNh_Gw%3A1678051100564&#038;ei=HAcFZIaMIpDF4-EPwtC2cA&#038;ved=0ahUKEwiGio6-28X9AhWQ4jgGHUKoDQ4Q4dUDCA8&#038;uact=5&#038;oq=set+textarea+to+not+allowing+copy+and+paste&#038;gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQogQyBQgAEKIEOggIABCGAxCwAzoHCCMQsAIQJzoKCCEQoAEQwwQQCkoECEEYAVDEB1jQKGDkM2gBcAB4AIAB7wKIAe8MkgEHMC40LjEuMpgBAKABAcgBA8ABAQ&#038;sclient=gws-wiz-serp'>Google search &#8220;set textarea to not allowing copy and paste&#8221;<\/a> got us to <a target=_blank title='Disable pasting text into HTML form' href='https:\/\/stackoverflow.com\/questions\/1226574\/disable-pasting-text-into-html-form'>javascript &#8211; Disable pasting text into HTML form &#8211; Stack Overflow<\/a> webpage, thanks, which helped us out here in compiling our first draft <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html_GETME\" title=\"no_copy_paste.html\">&#8220;proof of concept&#8221; no_copy_paste.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html\" title=\"Click picture\">HTML\/Javascript web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/no_copy_paste.html\" style=\"width:100%;height:800px;\"><\/iframe><\/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='#d58545' onclick='var dv=document.getElementById(\"d58545\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/paste\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58545' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d58550' onclick='var dv=document.getElementById(\"d58550\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/keyboard\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58550' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d58563' onclick='var dv=document.getElementById(\"d58563\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58563' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d58580' onclick='var dv=document.getElementById(\"d58580\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/div\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58580' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>At this blog, we&#8217;ve long been interested in the relative talents of the HTML textarea and div element types, as you can read about at HTML Div Overlay Jigsaw Talents Primer Tutorial. And today, on top of the &#8220;so far &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-typing-practice-choices-name-word-div-links-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":[4271,1824,4273,326,2971,342,367,576,587,652,664,673,1807,710,2505,4272,4267,1578,894,907,939,4269,4270,997,3184,1059,1866,1262,4268,1319,1671,3594,1452,4224],"class_list":["post-58580","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-accuracy","tag-character","tag-dict","tag-dictionary","tag-disable","tag-div","tag-dropdown","tag-html","tag-iframe","tag-javascript","tag-json","tag-keyboard","tag-link","tag-list","tag-name","tag-name-list","tag-onpaste","tag-onresize","tag-overlay","tag-paste","tag-phrase","tag-practice","tag-practising","tag-programming","tag-quote","tag-resize","tag-select","tag-textarea","tag-touch-typing","tag-tutorial","tag-type","tag-typing","tag-word","tag-word-list"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58580"}],"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=58580"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58580\/revisions"}],"predecessor-version":[{"id":58585,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58580\/revisions\/58585"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=58580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=58580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=58580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}