Wednesday, October 26, 2011

jQuery placeholder plugin

We have moved to using the jQuery plugin placeholder-enhanced for adding placeholders to browsers that don't support them (i'm looking at you IE9).

It seems to work better than the other plugins and libraries out there (we tried placify which had some trouble when pages resized or if forms were hidden in lightboxes).

It looks like placify creates a div with text (and class) positioned above the input element but placeholder-enhanced adds a class to input and then sets value to placeholder text. Both have positives and negatives. I can see why there are less positioning issues with placeholder-enhanced since it doesn't have to figure out the current location of the element to position a new div on top of it.

But the one thing i found interesting was that for password fields, placeholder-enhanced creates an input on top of the password input. Its a clever idea but i found a bug with IE9 (go figure) that by default password inputs w/out size have a set width. I need to patch the placeholder library to check for size of the input that it covers up. I've forked and submitted pull request on github.

The only other thing i'd like with placeholder-enhanced is way to disable adding 'placeholder' class to input elements when browser supports placeholder styling since we don't need that. It should be too tough to create new parameter. Someday :)

__END__

1 comment:

  1. wonderful information, I had come to know about your blog from my friend nandu , hyderaba.
    i have read atleast 7 posts of yours by now, and let me tell you, your website gives the
    best and the most interesting information. This is just the kind of information that i had
    been looking for, i'm already your rss reader now and i would regularly watch out for the new posts.
    oracle fusion financials training
    oracle fusion financials online training
    oracle fusion Procurement training training
    oracle fusion procurement online training

    ReplyDelete