iScrollとAndroidでinputするときにキーボードが出てこないときの対処方法

公開: 2013-09-22 19:06
更新: 2016-04-29 06:03
スマートフォンのwebブラウザ上でネイティブのiPhoneアプリのようなリッチなスクロールを実現したいならばやはり「iScroll」。最近使ってるサイトもどんどん増えてきたように感じます。

iOS7からSafariが改善されてスクロールがネイティブのようになめらかになったみたい。(※とりあえずiPadがそう)
ただネイティブのような固定ヘッダーありのwebアプリにしたいならまだまだiScrollが必要そうです。

当然ゴミのような動きをするアンドロイドも
若干なめらかな動きになるので導入する人も多いかと思います。
まぁ逆により一層カクカクしてしまう場合もありますが、その場合はユーザーごと殴ることでスッキリします。

ところがiScrollを使用すると一部のAndroidでfocus時にキーボードが出てこなくなってしまう現象が起きます。

あっきぃの持っているAQUOS Phone(ISW16SH)なんかは出てきませんでした。捨てます。

いつも無理矢理な感じで直していて、
「これだ!」という解決方法がなかなか出てこなかったのですが、先日ついに見つけました。

こちらがその解決策:Phonegap + iScroll: solving keyboard issues

どこの言葉で書かれているのでしょうか
日本語でないことはわかりますがあっきぃには理解出来ないため勝手な解説を入れておきます。

iScroll自体をちょこっといじります。
ここではiScrollのv4.2.5の圧縮してない方を使用。

①5行目あたりにvar showkey = true;を追加
//Before
(function(window, doc){
        var m = Math,
        dummyStyle = doc.createElement('div').style,
//After
(function(window, doc){
        var showkey = true;
        var m = Math,
        dummyStyle = doc.createElement('div').style,
ふんふん何に使うんだこれ。

②127行目あたりのonBeforeScrollStartを変更
//Before
        onRefresh: null,
        onBeforeScrollStart: function (e) { e.preventDefault(); },
        onScrollStart: null,
        onBeforeScrollMove: null,
//After
        onRefresh: null,
        onBeforeScrollStart: function(e) {
                var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');
                if(nodeType != 'select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea' && !showkey) {
                        e.preventDefault();
                }
                if(!showkey) showkey = true;
        },
        onScrollStart: null,
        onBeforeScrollMove: null,
うん。
余裕がある人は解析してください。

③inputタグにblurしたときshowkeyをfalseにするように
<input onblur="showkey=false">
以上です♪

「よくわからないけどこれでいいのか?」

ってあっきぃさんも半信半疑でしたけどちゃんと出るようになりました〜♪

え?そもそもfocusできない?
そんな人はtouchstart(touchend)を使いましょう♪

//タッチしたらフォーカス
$('input').bind('touchstart', function() {
        $(this).focus();
});
参考になればうれしいです♪

ではでは♪


参考:Phonegap + iScroll: solving keyboard issues

この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。