Erstellen Sie einen versteckten, aber zugänglichen mailto://-Link

Question

Ich weiß, dass auf dieser Website viel über E-Mail-Verwirrung geschrieben wurde. Aber vor kurzem habe ich dieses hübsche kleine CSS-trick entdeckt, das mir noch nie zuvor begegnet war.

Es zeigt die E-Mail-Adresse (hier: [email protected]), generiert aber leider kein anklickbares mailto:// 链接。如果有人将其输入为 href und die Adresse steht dem Bot natürlich wieder zum Abholen zur Verfügung.

Also habe ich eine kleine JavaScript-Routine hinzugefügt, die allen .e-mail Elementen einen Ereignis-Listener hinzufügt:

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

Einerseits bin ich mit dieser Lösung sehr zufrieden. Aber andererseits denke ich, dass mein Javascript die Eleganz und Einfachheit von HTML/CSS zerstört. Weiß jemand, wie man diese Methode der E-Mail-Verschleierung ergänzen kann, indem man nur reines CSS + HTML verwendet, was zu anklickbaren und sichtbaren Links führt, die alle gängigen Anforderungen erfüllen (d. h. kompatibel mit Bildschirmleseprogrammen, vollständig verschleiert, richtig formatiert, Rechtsklick zum Kopieren)?

Answer 1

我过去也做过类似的事情。我需要一种方法来在我的一个网站上显示我的电子邮件地址，但又不会在此过程中收到严重的垃圾邮件。我两年前实施了此操作，并且没有收到任何垃圾邮件。不过我没有用 CSS 做到这一点...这是纯 JS。

如果将鼠标悬停在结果上，您会看到它创建了一个可点击的电子邮件地址。

希望这有帮助。

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

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