未解決ですが、とりあえず試したことをまとめ。
Cordova アプリに設置した input 要素をタッチした際、フォーカスが当たるまでにラグがある時に試したことについてです。
ちなみに発生するのは iOS のみで、Android では全く問題ありませんでした。
今回試したのが、fastclick の導入と、クリックイベントを使って要素に無理矢理フォーカスを当てる方法の 2点です。
まず 1つ目の fastclick の導入について。
GitHub のページはこちらです。
GitHub – ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs
https://github.com/ftlabs/fastclick
<script> タグで、fastclick.js を読み込む方法もありましたが、私は npm でインストールしました。
コマンドは下記の通りです。
npm install fastclick
インストールに成功したら、任意の場所で下記を実行します。
const FastClick = require('fastclick');
FastClick.attach(document.body);
私は deviceready が呼び出された直後に実行するようにしました。
が、こちらを追加しても特に変化はなく…相変わらず、 input 要素をタップして一呼吸置いてからフォーカスが当たります。
このラグは何なんだ…。
次に、クリックイベントを使って無理矢理 input 要素にフォーカスを当てる方法です。
参考にさせていただいたサイトはこちら。
cordovaのiosでinputタグのタッチ反応が悪い時の解決策 – reon777のメモメモリー
https://reon777.com/2019/05/16/cordova-ios-input/
サンプルコードは下記の通りです。
<Input id="sample" onClick={() => document.getElementById("sample").focus()} />
ちなみに、React で書いています。
要素がクリックされたときに、自身にフォーカスが当たるようにしています。
ですが残念ながら、こちらも効果の程はよく分からず…。
そして、現在怪しいと思っているのが、Onsen UI です。
見た目がかなりおしゃれになっている分、動作が重いのかもしれないという短絡的な考えですが、とりあえず心当たりがあるところは片っ端から確認していこうと思います。
…Safari のバグでないことを祈っております…。
以上、Cordova アプリで input 要素のタッチ感度が悪いときに試した方法でした。
解決したら、また改めてまとめたいと思います。
