Email Protection with MooTools JavaScript v2

By  on  

Earlier this week I posted an article describing how you can protect your email links from spambots using MooTools. After some suggestions, I've made some improvements to my system.

The XHTML

	
	<span rel="david|davidwalsh.name" class="email custom-class">Email me!</span>
	

I've switched to using a span tag instead of an anchor to prevent search engines from seeing dead links. We put the modified email address in the rel attribute.

The MooTools JavaScript


window.addEvent('domready', function() {
	$$('.email').each(function(el) {
		var anchor = new Element('a', {
			href: 'mailto:' + el.get('rel').replace('|','@'),
			'class': el.get('class'),
			'text': el.get('text')
		}).replaces(el);
	});
});

I create an anchor element and replace the span element that was originally there.

Thank you to everyone that shared their ideas -- we came up with a better script!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

  • By
    Build a Toggling Announcement Slider Using MooTools 1.2

    A few of my customer have asked for me to create a subtle but dynamic (...I know...) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick...

Discussion

  1. This version is way cleaner, I assume I can change the pipe to any weirdo special character like &#98237980127r5981327r0981; then do the replace?

  2. neutral

    Have you tested how effective is it against spam yet?

    If it picks up any spam at all, I guess the next step would be to add in ROT13 to your approach.

  3. Internet explorer 7 doesn’t like the “,” after ‘class’: el.get(‘class’)
    That throws an error…

  4. Birke

    I tried to use this but my Browser does nothing if I click on the E-Mail me text.

  5. @Birke: Works for me.

  6. Wes

    I had to add ‘text’: el.get(‘text’) to the new anchor element to be able to show the “Email Me” text.

  7. @Wes: Good catch — updated that and compatibility with MooTools 1.3 (removed $each).

  8. Thanks! The only thing i did different was to use title instead of rel. rel isn’t valid in a span.

  9. Greetings,

    I am new to mootools and I would like to know were I put the java script code for this?

    Thanks for any help.

  10. Perhaps this might help some. For strict xhtml validation if possible use the id attribute and not rel and use a – in replace if |. Making these changes will allow proper validation on strict xhtml.

    Tim

    BTW I figured out were to put the code :)

  11. Perhaps this might help some. For strict xhtml validation if possible use the id attribute and not rel and use a – in replace of |. Making these changes will allow proper validation on strict xhtml.

    Tim

    BTW I figured out were to put the code :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!