HTML Link Contenteditable URL Primer Tutorial
Around here we’re keen on the contenteditable=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 …
… the delay in applying being that we had to reconcile two ways in which a click or tap by the user can mean either …
- click to navigate to the “a” link’s “href” attribute URL … or …
- click to gain focus for the contenteditable user controlled keyboard means of changing the “a” link’s “innerHTML” property
… and so we needed to use lots of inline Javascript HTML event logic as per …
<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>
… to make this be possible, as you can try below …
We hope this is of some interest to you!
If this was interesting you may be interested in this too.
