iPadでDatePcikerを利用する

最近、ASP.NET MVC、jQueryを使ってPCとiPadをターゲットにしたシステムを作成しています。業務アプリもPCだけをターゲットにするだけではなく、タブレットも合わせて考える時代なんですね。また、HTML5をはじめとするWeb技術の発達もあって、一昔前では考えられないリッチな画面をWebで作れるようになったことを感じています。

その中で jQuery UI DatePickerを使って日付入力させるのですが、iPadではテキストボックスにフォーカスが入るとソフト・キーボードが自動的に表示されてしまいます。これではせっかく表示されたカレンダが隠れてしまい使い難いので、これを抑制しました。

基本的には、テキストボックスをreadonlyに設定すればソフト・キーボードを非表示にできます。あとはこのタイミングですが、遅いとソフト・キーボードが一旦上がって・下がるような動きでチラついてような印象になります。touchstartであればそれを避けることができます。

$(this).bind("touchstart", function (e) {
    if ($(this).data("visible-picker")) {
        $(this).removeAttr("readonly");
        $(this).removeData("visible-picker");
    } else {
        if (!$(this).attr("disabled") && !$(this).attr("readonly")) {
            $(this).attr("readonly", true);
            $(this).data("visible-picker", true);
            $(this).blur();
        }
    }
});

//閉じたタイミングで設定を元に戻す
option.onClose = function (e) {
    if ($(this).data("visible-picker")) {
        $(this).removeAttr("readonly");
        $(this).removeData("visible-picker");
    }
};