2011年7月7日木曜日

[jQuery Mobile] input type="search"にキーボードイベントをバインドするには

jQuery Mobileで検索用入力エリアを作るには、

<input type="search">

を使います。これだけで、スマートフォンのネイティブアプリのようなスタイルを勝手に生成してくれます。

しかしこれだけだと、キーボードで入力しエンターキーを押しても検索を開始してくれません。
エンターキー押下時の処理が設定されていないからです。

ここで、エンターキー押下時の処理を追加するために下記のようなコードを書きます。
使用しているjQuery Mobileのバージョンは 1.0b1です。

<!-- html -->
<input type="search" id="searchinput">

/*--jQuery Mobile--*/
$("searchinput").keypress(function(e){
    if(e.keycode==13){
        //エンターキー押下時の処理
    }
}

はい。通常のjQueryではこれで動くのでしょうが、jQuery Mobileではこれだと動きません。
jquery.mobile-1.0b1.jsの3672行目あたりを見るとわかるのですが、type="search"の要素はページ生成時にjQuery Mobile側で動的にdiv要素で囲われています。
そして、原理はよくわかりません(知っている人教えてください)が、inputにイベントがバインドできなくなっているようです。
そのため、検索ボックスにイベントをバインドしたいときは、下記のように書きます。

$("div.ui-input-search").live("keypress", function(e){
    if(e.keycode == 13){
        //エンターキー押下時の処理
    }
}

動的に作成されるdivはui-input-searchクラスを持っているので、それを利用して指定しています。また、動的に生成されているdivですので、バインドにはlive()を利用する必要があります。