ページ要素を整理すべく、検索フォームの場所を（ヘッダ部分に）移動のうえ、Flickr 風なインタラクションをもったかたちに改良。あわせて input タグに accesskey 属性を追加し、キーボード操作で検索フォームにカーソル移動できるようにした。
HTML は以下のとおり。
<form method="get" action="http://blog.shimazu.org/index.php"> <input type="text" accesskey="f" name="s" id="searchinput" /> </form>
JavaScript コードは以下のとおり。実装において、Yahoo! UI Library (YUI) の yahoo-dom-event.js を使用した。最近よく見る直感的なインタラクションだけど、コードは思いのほか直感的ではない。
(function(){
var defalutvalue = 'Search...';
var edited = false;
var E = YAHOO.util.Event;
var D = YAHOO.util.Dom;
E.addListener('searchinput', 'focus', function(){
if(this.value == defalutvalue && !edited) this.value = '';
});
E.addListener('searchinput', 'blur', function(){
if(this.value == '') {
this.value = defalutvalue;
edited = false;
} else {
edited = true;
}
});
E.addListener(this, 'load', function(){
D.get('searchinput').value = defalutvalue;
});
})();
実装途中で気づいたけれど、Firefox の accesskey の操作がバージョン 2.0 から変わった模様。従来、[ Alt + Access Key ] だったのが、[ Alt + Shift + Access Key ] となっている。