Email Protection with MooTools JavaScript v2
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!
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![Chris Coyier’s Favorite CodePen Demos]()
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
![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...
![CSS Vertical Centering]()
Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping...
This version is way cleaner, I assume I can change the pipe to any weirdo special character like �r5981327r0981; then do the replace?
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.
Internet explorer 7 doesn’t like the “,” after ‘class’: el.get(‘class’)
That throws an error…
I tried to use this but my Browser does nothing if I click on the E-Mail me text.
@Birke: Works for me.
I had to add ‘text’: el.get(‘text’) to the new anchor element to be able to show the “Email Me” text.
@Wes: Good catch — updated that and compatibility with MooTools 1.3 (removed $each).
Thanks! The only thing i did different was to use title instead of rel. rel isn’t valid in a span.
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.
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 :)
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 :)