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
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

  • By
    pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.

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!