iOSドラムロール（スロットマシンピッカー）の実装について

以下、自分用メモです。

##どうやってドラムロールを出すの

最初はセレクトボックスで実装しようと思っていたのですが、
複数列に対応するには、html5で追加された

hoge.html

<input type="month" />

というものが使えるとのこと。
セレクトボックスを複数列のドラムロール表示にしたい(iOS)
（webエンジニアをしていながら、無知でお恥ずかしい...）

##実機でCSSがあたらない
この方法で実装はできたものの、なかなか希望するデザインにCSSがあたらず試行錯誤。
クロームのインスペクタでは反映されていても、実機では反映されていないこともしばしば。
スマホ独自のCSSを無効化する記述も必要。

hoge.css

#hoge {
    -webkit-appearance: none;
}

##イベント発火のタイミング
ドラムロールの項目を選択
↓
「完了」押下したタイミングでイベントを発火

したい。
onchange event for input type=“number”

hoge.js

jQuery(":input[type='month']").bind('change', function () {
    // しょり
});

最初、上記のように change で記述したところ、
iOSだと、（どれを選ぼうかな...）とクルクル選んでいる間にも、
つねにイベントが発火されつづけてしまう...！

どうやら、この場合は change ではなく、 focusout というイベントが用意されているらしい。
iPhone で change イベントが発火されすぎる問題

hoge.js

jQuery(":input[type='month']").focusout(function () {
    // しょり
});

無事、「完了」押下時のみ、発火できました。

先達はあらまほしきことなり、です。

##追記
なんと、 android では focusout で発火しない！
なぜなら android は「設定」を押しても、違う箇所をタップしない限り
フォーカスが外れないため。
結局、UAでの切り分けを追加しました。
スマートフォン（iPhone/Android）のページ内振り分け|Smart

hoge.js

if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 ){
    jQuery(":input[type='month']").focusout(function () {
        // iPhoneのしょり
    });
}else if( navigator.userAgent.indexOf('Android') > 0 ){
    jQuery(":input[type='month']").bind('change', function () {
        // androidのしょり
    });
}

##追記2

hoge.html

<input type="month" max="2018-02" min="1999-01" />

と書くと、日付範囲の指定ができます。
ただ、iOSのsafariには対応していない...！
(T.T)