Textfield labels [resolved]

riv · Last edited by riv on Mon Mar 13, 2006 7:03 pm; edited 1 time in total

My question is concerning textboxes: I want to have a greyish "label" which is the default value of the text-box, and when the text-box goes into focus, I want the label to dissappear, like the search field on The Apple Blog. I've searched through The Apple Blog's main CSS file, but I can't find what does the label trick, and I'm sure it isn't done simply with HTML as I've also looked at the site's HTML file as well. (Looking through source code is how I learn most of the stuff I know. Laughing

)

Kaneda

It's done by Javascript. Simplest (but not best (in terms of extensibility and web standards)) is to do:

riv

All that stuff sounds like french to me Very Happy

. Anyways, I re-read your post and am now attempting to decipher The Apple Blog's JavaScript code that they are using. (As you can figure out from my post, JavaScript isn't my strong suit Confused

.)

riv

OK, I have almost figured almost everything out. I have the functions in my code, and I get how you make the text grey and stuff. Now what exactly do you mean by "JavaScript Events Handlers?" I have looked through all of The Apple Blog's code, but the only part I understand is the blur and focus functions. How exactly do I use a "JavaScript Event Listener?" And what browsers (other than IE) are affected if I don't use it? I don't really care if my website is supported by IE right now... If a browser doesn't fully support transparant png's, I won't try and make it support my website.

EDIT: Since this isn't done with CSS and HTML (as I originally thought), could a moderator move this thread to a more approperiate section?

riv

Never mind... I figured it out by myself, with a little help from the W3C validator and theappleblog.com's javascript.

Kaneda

Ah, sorry, didn't notice anything new posted in this thread Wink

I'll just try and explain javascript event handlers as short as I can then - in case you're still interested - it may come in handy later on Wink

...

Event handlers are javascript functions that handle an event in the browser. I.e., when some event occurs, a function (the event handler) will be called. An event could be clicking on a button or link ("onclick"), pressing a key ("onkeypress") etc. In this case, since we wanted the search field to be cleared when the cursor enters it (when it gets "focused"), we use "onfocus". "onblur" is the opposite of "onfocus" - it's called when the cursor leaves the input field.

The old way
The old and proven (but standards-wise obsolete) way to assign such an event handler to an element (HTML tag) would be to add it directly in the HTML code, like we did:

<input type="text" value="Search" onfocus="searchFocus();">

That meant, "when this input field gets the focus, call the searchFocus() function". The searchFocus() function then takes care of clearing the field. This works in all browsers.

The proper way
The proper web standards way of adding handlers is using a javascript function called addEventListener(). The reason this is preferred is that:

1. It allows more than one handler for the same event (if you used the HTML approach, the second handler would just overwrite the first one)

2. It gets rid of javascript in the HTML entirely, so that behaviour is separate from structure, as it should be according to the current paradigm:

HTML for document structure and content.
CSS for presentation/layout.
Javascript for behaviour.

The problem with addEventListener() is:

1. Internet Explorer doesn't support it (it has its own attachEvent() which doesn't work the same at all), so lots of event handling frameworks have been written in order to make this transparent to the programmer.

2. It requires a more elaborate approach in the Javascript, since we need to first find the proper HTML elements (in our case, the search field) and then assign the function to it using addEventListener()