dcneiner/In-Field-Labels-jQuery-Plugin

Support placeholder tag

Closed this issue · 3 comments

Support the new html5 placeholder attribute http://diveintohtml5.org/forms.html,

Be great if the plugin etects if the browser supports placeholder attribute if it does then the plugin doesn't do anything, if it doesn't then it works as normal but uses the placeholder tag to populate the label on load

Placeholder and in-field labels aren't quite the same thing. The role of a placeholder is to suggest an example of input, or give a hint on the format. For instance, you would have a label "date of birth" and a placeholder of "MM-DD-YYYY".
Moreover, the current browser implementation (except for Safari) of placeholder hides the placeholder text as soon as the input gains focus, which makes it less useful for use as in-field label.

But I see you point, and anyway, the placeholder would overlap the label if the plugin is executed. So if a placeholder attribute is present, the plugin shouldn't do anything. Actually, if it is present and if the browser doesn't support it, my suggestion would be to use the same behaviour as the in-field label to polyfill the placeholder. Kill two birds with one plugin: in-field label + placeholder polyfill (that doesn't submit the placeholder content when the field is left is empty).

AFAIK, placeholder detection is as simple as ('placeholder' in document.createElement('input'));.

Yes I see your point actually. it is nice to keep the label displayed in the field until the user starts typing. I have seen some examples where people are removing the label all together and just using placeholder, this becomes confusing because you might tab to the next field before reading what it is, by which time the placeholder is removed and you have no idea what to enter.

I also see the needs met by placeholder as being different than those met by this plugin. The other problem with trying to detect it, is this plugin doesn't generate the label – it requires the developer to already have the label. So it first finds the label, then the input. If at that point it stopped due to the placeholder, not sure how I feel about that. I am going to close this thread for now – the fix would be to not run the plugin against those labels.