How does one cause a form input to be active when the page first loads, without clicking on it?
Google’s search page is like this. You don’t have to click on the box before you type.
Also, another quick question regarding forms: can you make placeholder/suggestion text that disappears on click? Much like the text in the “Link to example” in Freewaytalk’s new thread form. (Come to think of it, maybe just a image for the non-active background that has the text and switches over to a blank sheet on click would do it).
Hi Caleb,
There are a couple of ways to do this; the easy way and the not so easy way.
The easy way:
Use a couple of new HTML5 attributes for input fields to autofocus the input and provide placeholder text (when the field isn’t active).
For example; http://www.freewayactions.com/test/autofocus/
The benefits are that the code is easy and quick to implement. The bad points are that these will only work in modern browsers and will invalidate your HTML if not used on an HTML5 page.
The not so easy way:
Use JavaScript to focus the input field when the page loads. You can also use a block of code to provide the user with placeholder text until they click in the field. Essentially these script would emulate what the HTML5 option (above) does but would work for older browsers.
The benefits are that it will work for all browsers (yes, even IE!) and won’t invalidate the page, The disadvantage is that it is a lot more code to maintain.
I can’t locate the exact code for this at the moment but this page has some of the elements in the source code (the placeholder text for non-Safari browsers); http://www.freewayactions.com/test/safari-search/
Regards,
Tim.
Placeholder text such as at http://www.deltadesign.co/formtest.html uses the Extended attribute such as Item>Extended with a new Name/Value pair of placeholder: your name here
Not exactly sure how good cross browser support is.
As far as selecting a text field onload try this bit of JS in Page>HTML Markup in the before section
This is a nice example of a progressive enhancement. It works where it works, and it doesn’t work (but doesn’t cause any problems) where it doesn’t. Note that no IE < 10 can see this effect.
Walter
On Oct 11, 2012, at 11:32 AM, Caleb G wrote:
Thanks Dave, Tim, and Walter!
Tim; your HTML5 suggestion worked perfectly and was really quick to implement.
Thanks for the warning Walter, though I’m actually building myself a custom new tab page, so I’m not too concerned about compatibility at this point! ;D