建立隱藏但可訪問的 mailto:// 鏈接

Question

我知道這個網站上已經有很多關於電子郵件混淆的內容。但最近我發現了這個我以前從未遇到過的簡潔的小CSS-trick。

它顯示了電子郵件地址（這裡：[email protected]），但遺憾的是它沒有產生可點擊的 mailto:// 連結。如果有人將其輸入為 href，當然該位址將再次可供機器人擷取。

所以我添加了一個小的 JavaScript 例程，它為所有 .e-mail 元素添加了一個事件偵聽器：

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

一方面，我對這個解決方案非常滿意。但另一方面，我認為我的 javascript 破壞了 HTML/CSS 的優雅和簡單性。有誰知道如何補充電子郵件混淆的這種方法，僅使用純CSS HTML，從而產生滿足所有常見要求的可點擊且可見的鏈接（即屏幕閱讀器兼容、充分混淆、正確）格式化，右鍵可複製）？

Answer 1

我過去也做過類似的事情。我需要一種方法來在我的一個網站上顯示我的電子郵件地址，但又不會在過程中收到嚴重的垃圾郵件。我兩年前實施了此操作，並且沒有收到任何垃圾郵件。不過我沒有用 CSS 做到這一點...這是純 JS。

如果您將滑鼠停留在結果上，您會看到它建立了一個可點擊的電子郵件地址。

希望這有幫助。

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

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