Create a hidden but accessible mailto:// link

Question

I know there's been a lot written on this site about email confusion. But recently I discovered this neat little CSS-trick that I've never encountered before. It displays the email address (here: [email protected]), but unfortunately it does not generate a clickable

mailto://

link. If someone enters it as href, of course the address will be available for the bot to pick up again. So I added a small JavaScript routine that adds an event listener to all

.e-mail

elements:

// Email de-obfuscation, start mail client, copy email to clipboard:

document.querySelectorAll('.e-mail').forEach(e => { 

    // get the encoded email address from ::after and decode:

    function getDecodeEmail(event) {
        z=event.currentTarget;
        y=getComputedStyle(z,'::after');
        x=y.getPropertyValue('content');
        // reverse string rtl
        v=x.split("").reverse().join("");
        // remove all "
        return v.replace(/['"]+/g, '');
    };
    
    // onClick start mail client with decoded email address:

    e.addEventListener("click", event => {
        // prevent href=#
        event.preventDefault();
        // get the (reversed) email address of the calling anchor
        v=getDecodeEmail(event);
        //window.location.href="mailto:"+v;
        // former statement doesn't fire in SE code snippets, 
        // but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/
        // for now, let's just display the link:
        alert("mailto:"+v);
    });

    // right mouse click copies email to clipboard:

    e.addEventListener("contextmenu", event => {
        // prevent href=#
        event.preventDefault();
        // get the (reversed) email address of the calling anchor
        v=getDecodeEmail(event);
        // copy v to clipboard
        navigator.clipboard.writeText(v);
        // just to check:
        navigator.clipboard.readText().then( clipText => alert(clipText) );
        // former statements don't work in SE code snippets,
        // but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/

    });
});

.e-mail::after {
  content: attr(data-mailSvr) "
<a class=e-mail data-mailUsr=resu data-mailSvr=moc.niamod href=""></a>
40" attr(data-mailUsr);
  unicode-bidi: bidi-override;
  direction: rtl;
}

rrreee

On one hand, I'm very happy with this solution. But on the other hand, I think my javascript destroys the elegance and simplicity of HTML/CSS. Does anyone know how to supplement

this method

of email obfuscation, using only pure CSS HTML, resulting in clickable and visible links that meet all the usual requirements (i.e. screen reader compatible, fully obfuscated, correct) Format, right click to copy)?

Answer 1

I've done similar things in the past. I need a way to display my email address on one of my websites without getting serious spam in the process. I implemented this two years ago and haven't received any spam. I'm not doing this with CSS though... this is pure JS.

If you hover over the result, you'll see that it creates a clickable email address.

Hope this helps.

let fname = "first";
let lname = "last";
let domain = "gmail.com";

email.innerHTML = `${fname}.${lname}@${domain}`;