This is a bit old - you may or may not notice the date on this post but it's over a year old. That doesn't mean it's not useful but we all know how fast things chance on the web so there's a chance that techniques and technologies described here could be a little dated.

Revisiting HTML5 placeholder fixes

I had a detailed look at my analytics for the first time in a while and I noticed I pick up quite a bit of traffic from StackOverflow.com which was quite interesting. Digging further I had a look and found most of it is to the quick JQuery based HTML5 placeholder fix I posted a while ago.
As pointed out by some Stack Overflow commenters there are elements of the coding that are less than ideal so I thought I’d address them and see what can be done.

It’s worthwhile revisiting things, after all we learn from what we do and I’m sure we can all look back on stuff we’ve coded and see ways to improve. The two main complaints I’ve seen with the old code is the repeated use of $(this) and that the form could well be submitted with the placeholder text in place.

I will say though I haven’t done a whole lot of JQuery work in recent times so please if you can see errors or improvements for this code please leave a comment!

Firstly to change the problem of repeated use of $(this).

So from this we simply assign $(this) to a variable which stops the code looking things up every time and simply using the stored variable.

Secondly to stop the code submitting the placeholder text let’s use something like this :

That will look at the parent form of the element and attach a function for when that is submitted. When it is submitted it will loop through the input elements and remove any values that match the placeholder text. It also adds a class placeholderPending, so that it will only loop through the form once, without the class it will go over the form for each element in the form. So if you have 4 input elements it would loop over the form four times to check for placeholder values, adding the class avoids that.

That leaves a full bit of code like this

There are still issues here – for instance if you try and submit something with the same value as the placeholder it will be removed. So make sure you use sensible placeholders, after all they should be there to demonstrate the format of an input.

As I said further up – feel free to point out any errors or issues or improvements – we’re all learning still!