views:

14

answers:

2

I want to be able to do something like

<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>

And the title will auto fade out and back in as the field value, unlike the "search" here in stackoverflow (right on the top, it only fade out).

I could come up with a javascript and use onblur and onfocus, but that would be troublesome and I hope unnecessary. Preferably, I'd set just a single function for every INPUT and TEXTAREA within any given file, so all I need to do is set up its title.

First question: what's the name for this?

Main question: Anyone have a good solution? What about with no jquery? Maybe there's a way to do it with CSS3 only, though I doubt it...

+2  A: 

If you're OK with it only working in newer browsers, you could use the placeholder attribute on the text field, to supply a placeholder that will disappear when you focus and reappear when you blur. You can find some more info in Dive Into HTML5.

<input type="text" name="txtField" value="" placeholder="input your text" />

If you want it to work in older browsers, you'll probably have to implement the placeholder yourself, in JavaScript for instance. You can find all of your input and textarea elements using document.getElementsByTagName and add the onfocus and onblur handlers to each of those using DOM events.

Brian Campbell
oh man, I really should start reading into html5 more.
Litso
thanks Brian, that's perfect. all I wanted to know! - in fact, now I just want to know if there's a tag or way to unify "placeholder", "title" and "alt", since they both are all description attributes and usually carry the same value. :P
Cawas
placeholder is obviously just a placeholder. Title is used to provide information about the form/link/image's goal or destination. Alt is only used for images to replace the image if a browser can't load it. An alt text is typically brief and descriptive in nature, whereas the title can hold more detailed or trivial information.
Litso
@Litso yes, I should just write a very similar script to do join them all.
Cawas
Personally I'd say don't script alt tags if you can avoid it.
Litso
@Cawas I think his point is that they all have separate uses, so you probably don't want to put the same value in all of them. Sometimes you'll want the same thing in two of them, but just setting them all to be the same all the time is probably a mistake.
Brian Campbell
@Brian true. my idea would be doing something like this: `description="fill up" title="" placeholder=""` and the script would fill the rest just detecting they're set to nothing, or to `title="title"`.
Cawas
A: 

Ok, thanks to Brian's perfect answer, this is the code I came up with. Took me long enough to make it work:

<form>
  <input type="text" name="txtField" value="" placeholder="input your text" />
  <textarea name="areaField" placeholder="input your long text"></textarea>
</form>

<script type="text/javascript">
(function() {
    ie_placeholder(document.getElementsByTagName('input'));
    ie_placeholder(document.getElementsByTagName('textarea'));
    function ie_placeholder (fields) {
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            field.onfocus = function () {
                if (this.value == this.placeholder) {
                    this.style.color = '';
                    this.value = '';
                }
            };
            field.onblur = function () {
                if (this.value == '' && this.placeholder != null) {
                    this.style.color = 'silver';
                    this.value = this.placeholder;
                }
            };
            field.onblur();
        }
    }
})();
</script>

Just put it in the end of the form, and you should be fine. And, please, use your favorite server side script to remove this from HTML5 compatible browsers. The placeholder attribute will just work on HTML5.

Cawas