Flickr 風の検索フォーム

searchinput.png

ページ要素を整理すべく、検索フォームの場所を(ヘッダ部分に)移動のうえ、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 ] となっている。

Leave a Reply