非表示だがアクセス可能な mailto:// リンクを作成する

Question

このサイトには、電子メールの混乱について多くのことが書かれていると思います。しかし最近、これまで出会ったことのない、ちょっとした CSS の巧妙なトリックを発見しました。 電子メール アドレス (ここでは [email protected]) が表示されますが、残念ながら、クリック可能な

mailto://

リンクは生成されません。誰かがそれを href として入力した場合、当然、そのアドレスはボットが再度取得できるようになります。 そこで、すべての

.e-mail

要素にイベント リスナーを追加する小さな JavaScript ルーチンを追加しました。 リーリー リーリー リーリー

一方で、私はこのソリューションに非常に満足しています。しかしその一方で、私の JavaScript は HTML/CSS の優雅さとシンプルさを破壊していると思います。純粋な CSS HTML のみを使用して、電子メール難読化の

この方法

を補足する方法を知っている人はいますか。その結果、通常のすべての要件 (つまり、スクリーン リーダーと互換性があり、完全に難読化され、正しい) の形式を満たす、クリック可能で表示されるリンクが得られます。クリックしてコピーします)?

Answer 1

私も過去に似たようなことをしたことがあります。重大なスパムを受信することなく、自分の Web サイトに自分の電子メール アドレスを表示する方法が必要です。これを 2 年前に実装しましたが、スパムは一度も受信していません。ただし、これをCSSで行っているわけではありません...これは純粋なJSです。

結果にマウスを置くと、クリック可能な電子メール アドレスが作成されることがわかります。

＃＃＃ お役に立てれば。

let fname = "最初"; lname = "最後"; ドメイン = "gmail.com" にします。 email.innerHTML = `

${fname}.${lname}@${domain}`;