Question

I’m writing some JavaScript to implement placeholder text in browsers that don’t have it.

I’ve successfully styled the placeholder text in Chrome 9 and Fx 4b11 using the following style rules:

::-webkit-input-placeholder { color: #969696 !important; }
input:-moz-placeholder { color: #969696 !important; }

Now I want my JavaScript to retrieve this data from the stylesheet in browsers that don’t understand those rules so I can manually style the placeholder text.

Does anyone know how I can do that in YUI3? I tried:

YUI().use('node',function(Y) {
    var phColor = Y.all('::-webkit-input-placeholder').getStyle('color');
});

Unfortunately this just returns:
“undefined: not bound to any nodes { _query=”input::-webkit-input-placeholder”, _nodes=}”

Anyone know how I can do this? Or if it’s possible?

Answer 1

If you aren’t sold on using YUI exclusively (or are willing to harvest the jQuery code from a plugin and convert it to a YUI3 module) this jQuery plugin does exactly what you are trying to do: https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

I’ve used it in a production environment and it works great even as far back as IE6 🙂