frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

android端末でfocusが外れない場合の対処法

スポンサードリンク


スポンサードリンク


なかなか遭遇しないバグだと思うのですが、念のためmemoします。

エラー発生条件・環境

android5を使用。カルーセルのサムネイルをタップしてから、スワイプする。

エラーの状態

スワイプ後もタップしたサムネイルからフォーカスが外れず、スワイプした画像のサムネイルもフォーカスした状態。

対処法

jsでフォーカスを外す カレントにフォーカスさせる

タップ、スワイプしたサムネイルはclassを付与しcssを当てているので本来jsでフォーカスを外す、フォーカスさせる処理を書く必要なありません。
jsで処理する場合は下記のようにします。

<ul>
    <li><button>1</button></li>
    <li><button>2</button></li>
    <li><button>3</button></li>
    <li><button>4</button></li>
</ul>
$('li button').blur();
var len = $('li').length;
for(var i = 0; i < len; i++){
    if($('li').eq(i).hasClass('current')){
        $('li').eq(i).find('li button').focus();
    }
}

ただこちらだけではフォーカスは外れているはず(オレンジの枠は移動している)なのに:focusで指定したスタイルが効いてしまっている状態でした。

cssのfocusを消す
&:hover, &:active, &:focus {
    //focus後のスタイル
}

要はタップした時のフォーカスのスタイルがずっと効いている状態(他の要素をタップするまで)になっているため、
cssで指定した擬似セレクタの:focusの指定を消しました。

レスポンシブデザインであればPCでは上記を指定し、スマートフォン幅で効かなくなるようメディアクエリを設定するとよいです。

www.frontendmemo.xyz