One standard feature on most blogs (and lots of other places, of course) is a search widget. I wanted to make sure that its functionality was obvious without having to resort to a label sitting on top of it (or next to it). So, I experimented with a little Javascript to create some placeholder text to make clear what purpose the field served. Once the user clicks in the field, I also want the placeholder text to go away (and then return when the user leaves the field if it is empty).
HTML
The simple search text field, of course, needs to be wrapped in a form, and in order for the effects to take place that we want, we need to do some things when the page loads.
Listing: index.html
<html>
<head>
<script src="lib/search.js"></script>
<link rel="stylesheet" type="text/css" href="lib/public.css" />
</head>
<body onload="javascript:set_search_placeholder();">
<form name="blog_search" method="post" action="search.php">
<input name="_search" type="text" id="search_dblog" class="default_value"
onfocus="javascript:remove_search_placeholder();"
onblur="javascript:set_search_placeholder();" />
<a href="javascript:submit_search();" class="search_go">Find</a>
</form>
</body>
</html>
Javascript
To make our placeholder work, we need two javascript functions, set_search_placeholder() and remove_search_placeholder(). Rather than use an ordinary submit button, we'll use stylesheets to make it look pretty and a javascript function to make it go.
Listing: lib/search.js
function set_search_placeholder() {
searchNodes = document.getElementsByName('_search');
searchField = searchNodes[0];
if (! searchField.value) {
searchField.value = "Search developerBlog";
searchField.style.color = '#999';
}
}
function remove_search_placeholder() {
searchNodes = document.getElementsByName('_search');
searchField = searchNodes[0];
if (searchField.value=="Search developerBlog") {
searchField.value = '';
searchField.style.color = '#000';
}
}
function submit_search() {
document.blog_search.submit();
}
CSS
We just need a bit of style to make the "Find" button look the way we'd like (for brevity sake, I haven't included the entire stylesheet).
Partial Listing: lib/public.css
a.search_go {
border: 1px solid #333;
margin: 0 0 0 2px;
padding: 1px 3px 1px 2px;
background-color: #999;
color: #fff;
text-decoration: none;
font-family: Optima, arial, sans-serif;
font-size: 11px;
}
Ever been to Google's home page? The moment the page finishes loading, the cursor is happily blinking in the search field. This can be done with a little simple javascript.
<body onload="javascript:document.blog_search.s.focus();">
where "blog_search" is the form's name attribute and "s" is the name of the field.
For the developerBlog, the code requires a little extra twist since I use placeholder text in the search field. Otherwise, the phrase disappears. So, how can I autofocus the field and preserve the placeholder text?
<script>
function bring_focus_to_search() {
document.blog_search.s.focus();
set_search_placeholder();
document.blog_search.s.select();
}
</script>
<body onload="javascript:bring_focus_to_search();">
Now the developerBlog works the way I want.
