HTML5 Placeholder in all browsers

One of my favourite features of HTML5 (and yes, I have several!) is the placeholder attribute. It's fantastic for useability and reduces the amount of space used by forms on the page.

And of course, it's not supported by Internet Explorer.

Because I was building a form that requires placeholder text,and validation (what forms don't these days) I decided to finally do something about it.

So here is a little jQuery snippet I wrote to add in support for browsers that don't natively work with the placeholder attribute. It also works in both input and textarea fields.

I've used Modernizr to check for placeholder support. Why re-write the wheel?

// Add pseudo placeholder to bad browsers
    var noPlaceSupport = !Modernizr.input.placeholder;
 
    if(noPlaceSupport) {
        var myInputs = $('input[placeholder], textarea[placeholder]');
        myInputs.each(function() {          
            // Set a value now!
            $(this).val($(this).attr('placeholder'));
            // Set up my focus in, to remove text if it is the placeholder
            $(this).focusin(function() {
                if($(this).val() == $(this).attr('placeholder')) {
                    $(this).val('');
                }
            });
            // On focus out, if empty set it back to the placeholder
            $(this).focusout(function() {
                if ($(this).val() == '') {
                    $(this).val($(this).attr('placeholder'));
                }
            });
        });
    }
There is one little gotcha with this; I had originally written the check as $(this).placeholder, as I figured jQuery was smart enough to work with that in IE. Sadly I was mistaken, but $(this).attr('placeholder') is cross browser compatible.

And now you can extend your validation plugin to check for the default value!

Of course, there is no great fallback here for no JS browsers. Personally, if I had more time I would be using jQuery to dynamically make the placeholder text the label value for this field, and then hiding the label.

I hope this snippet is of use to someone out there!

Handy MooTools script for phpBB3 inside a wrapper

For reasons that are too long to go into, a change between phpBB2 and phpBB3 was to make all links not include a target attribute to make the output meet relevant requirements.

On one site I manage (http://www.connectage.com) we have a forum inside a Joomla! wrapper. I'm sure you can see where this is going.

So to stop this happening, I wrote a MooTools script. This script ensures that links to our site open in the parent window (i.e. not the iframe) and other links open in a new window / tab.


<script src="../media/system/js/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('load', function() {
// send links to a new window, unless it is on our site
var postLinks = $$("div#pagecontent div.postbody a.postlink");

postLinks.each(function(link) {
var sendTo = '_blank';
if(link.getProperty('href').contains(window.location.hostname)) {
sendTo = '_parent';
}
link.setProperties({
target: sendTo,
rel: 'nofollow'
});
});
});
</script>


Simple as that.

There are two scripts there. 1 brings in the default Joomla! MooTools script, which is needed so the rest works.

The second bit, creates an array of links within posts only, checks the domain they're going to and sends them to the parent window (target='_parent') or a new window (target='_blank').

And because it's Javascript, I believe it's still standards compliant. It will also not stop your site working if someone has Javascript turned off in their browser.

This may not work on your template, but it should be easily adaptable if you need it for your own site.

Validated XML for Joomla!

http://docs.joomla.org/Official_DTDs

And better yet, if you're using Eclipse and put the information in (correctly), it will validate it for you. Might solve my current problem with a component not installing correctly.