{"id":56711,"date":"2022-10-09T03:01:39","date_gmt":"2022-10-08T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56711"},"modified":"2022-10-02T16:53:13","modified_gmt":"2022-10-02T06:53:13","slug":"html-link-contenteditable-url-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-link-contenteditable-url-primer-tutorial\/","title":{"rendered":"HTML Link Contenteditable URL Primer Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Link Contenteditable URL Primer Tutorial<\/p><\/div>\n

Around here we’re keen on the contenteditable<\/a>=true HTML global attribute, but had never applied it to any HTML “a” links until we did it when we presented Image and Text PDF Primer Tutorial<\/a> …<\/p>\n


\nSpecifically, here, with an \"a\" link whose \"href\" attribute equals its \"innerHTML\" contenteditable wording<\/a>
\n<\/code><\/p>\n

… the delay in applying being that we had to reconcile two ways in which a click or tap by the user can mean either …<\/p>\n

    \n
  1. click to navigate to the “a” link’s “href” attribute URL … or …<\/li>\n
  2. click to gain focus for the contenteditable user controlled keyboard means of changing the “a” link’s “innerHTML” property<\/li>\n<\/ol>\n

    … and so we needed to use lots of inline Javascript HTML event logic as per …<\/p>\n


    \n<a target=_blank style='padding: 3 3 3 3;' title='Can change URL or wait 8 seconds for navigation to occur' id=\"acelink\" data-ce='' onclick=\"if (this.getAttribute('data-ce').length == 0) { this.style.textDecoration='none'; this.style.backgroundColor='#e0e0e0'; setTimeout(function(){ if (document.getElementById('acelink').getAttribute('data-ce').length == 0) { document.getElementById('acelink').setAttribute('data-ce','n'); document.getElementById('acelink').setAttribute('contenteditable', !document.getElementById('acelink').getAttribute('contenteditable')); document.getElementById('acelink').click(); } },8000); }\" onkeydown=\"this.setAttribute('data-ce','y'); this.title='Will navigate to your new URL.';\" href=\"https:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php?pdfimageplustext=y&pdfimage=moodle.jpg&pdftext1=Moodle%20Page&pdfx1=230&pdfy1=250\" onblur=\" this.style.textDecoration='underline'; this.style.backgroundColor='white'; this.href=this.innerHTML.replace(\/\\&\\;\/g,'&'); this.setAttribute('contenteditable', !this.getAttribute('contenteditable')); this.click();\" contenteditable=true>https:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php?pdfimageplustext=y&pdfimage=moodle.jpg&pdftext1=Moodle%20Page&pdfx1=230&pdfy1=250<\/a>
    \n<\/code><\/p>\n

    … to make this be possible, as you can try below …<\/p>\n

    https:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php?pdfimageplustext=y&pdfimage=moodle.jpg&pdftext1=Moodle%20Page&pdfx1=230&pdfy1=250<\/a><\/p>\n

    We hope this is of some interest to you!<\/p>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n