Buat pautan mailto:// yang tersembunyi tetapi boleh diakses

Question

Saya tahu terdapat banyak yang ditulis di tapak ini tentang kekeliruan e-mel. Tetapi baru-baru ini saya menemui CSS-trick yang kemas ini yang tidak pernah saya temui sebelum ini.

Ia menunjukkan alamat e-mel (di sini: [e-mel dilindungi]), tetapi malangnya ia tidak menjana yang boleh diklik mailto:// 链接。如果有人将其输入为 href dan sudah tentu alamat itu akan tersedia untuk bot mengambil semula.

Jadi saya menambah rutin JavaScript kecil yang menambahkan pendengar acara kepada semua .e-mail ​​elemen:

// 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

Di satu pihak, saya sangat gembira dengan penyelesaian ini. Tetapi sebaliknya, saya rasa javascript saya memusnahkan keanggunan dan kesederhanaan HTML/CSS. Adakah sesiapa tahu cara untuk menambah kaedah ini kekaburan e-mel, hanya menggunakan CSS + HTML tulen, menghasilkan pautan yang boleh diklik dan kelihatan yang memenuhi semua keperluan biasa (iaitu pembaca skrin serasi, dikaburkan sepenuhnya, diformat dengan betul, Klik kanan untuk menyalin)?

Answer 1

Saya pernah melakukan perkara yang serupa pada masa lalu. Saya memerlukan cara untuk memaparkan alamat e-mel saya di salah satu tapak web saya tanpa mendapat spam yang serius dalam proses. Saya melaksanakan ini dua tahun lalu dan tidak menerima sebarang spam. Saya tidak melakukan ini dengan CSS walaupun... ini adalah JS tulen.

Jika anda menuding pada hasil carian, anda akan melihat bahawa ia mencipta alamat e-mel yang boleh diklik.

Semoga ini membantu.

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

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