Czasami musimy opublikować na stronie WWW adres e-mail w jawnej postaci, jako tekst. Jak to zrobić, by nie dać się złapać w sidła spamerskich robotów? Rozwiązań jest dużo, poczynając od szyfrowania przy pomocy JavaScriptu, przez odwracanie tekstu z CSS, kończąc na zamienianiu znaków na ich encjowe odpowiedniki w HTML.

Pomysłów i sztuczek jest oczywiście więcej, a do ich grona dodam sprawdzoną i prostą w implementacji metodę, której używam.

Potrzebny kod HTML/JavaScript:

Tak stworzony link odsyła już do adresu fake@kamilbrenk.pl. Czasami potrzebujemy pokazać adres e-mail bezpośrednio w tekście, jako link. Do tego celu potrzebujemy kilku dodatkowych linijek CSS:

W wyniku tego otrzymamy coś na wzór normalnego odsyłacza, lecz niedostępnego dla spamiarek:

Jak to działa?

Metoda należy raczej do prostych, lecz wypadałoby dodać kilka słów wyjaśnień:

• w atrybucie data-mail-local musisz podać część adresu przed znakiem @, natomiast w atrybucie data-mail-domain część za znakiem @; atrybuty te możesz łatwo zmienić, lecz musisz pamiętać o ich poprawieniu we wszystkich częściach kodu (HTML, CSS i JavaScript)
• metoda działa również w przeglądarkach z wyłączonym JavaScriptem, z tym, że bez obsługi JavaScriptu link nie będzie klikalny – jedynie możliwy do skopiowania/samodzielnego odpalenia,
• dla elementu potrzebujesz zdefiniować atrybut tabindex, by obsługiwał zdarzenie focus,
• link jest domyślnie nieaktywny – zostaje stworzony dopiero w momencie kliknięcia przez użytkownika (obsługuje również ekrany dotykowe).

Kod jest kompatybilny z W3C, nie wymaga używania zewnętrznych narzędzi do szyfrowania, umożliwia ręczne kopiowanie adresu, jest prosty w implementacji, działa od razu po wczytaniu strony. Przede wszystkim jednak jest skuteczny w działaniu! :-)