Search Field Text Without a Submit Button

Andrew — Fri, 19 Mar 2010 17:34:25 +0000

If you are trying to implement a search field in your website but do not plan on having a submit button (relying on the user to click enter), you’re going to want to put instructions somewhere.

In my case, I decided to populate the box it self with the words “Type and press enter to search”.

1	<input type="text" name="q" value="Type and press enter to search." id="searchfield" />

Unfortunately, this left the user with the task of manually deleting the text in the box before searching. Adding a tiny bit of javascript to your HTML element will automatically remove the text when the user clicks on it and if the user doesn’t enter anything it will add the text back when the user clicks away.

1
2
3

Hopefully it works for you all, I have only tested it in Firefox and Safari on a Mac.

Bad HTML

Andrew — Thu, 09 Apr 2009 23:46:00 +0000

Sorry to any visitors affected by the malformed site that cropped up due to my last post…

Old habits die hard, and I write too many of my posts in HTML only to have a missing quotation mark leave my page poorly rendered. I need to rely on the (fairly) excellent built in wordpress wysiwyg editor. At least until I write a proper, custom blog engine for this page…

The affected post has been fixed and you can now go about your business.

andr3w.net » html

Search Field Text Without a Submit Button

Bad HTML