以前、「【未解決】Cordovaアプリでinput要素のタッチ感度が悪い」という記事を投稿しましたが、その解決方法が判明したのでまとめます。
と言っても、それほど難しいことはしておりません。
まず、前の記事でも紹介した、クリックイベントを使って無理矢理 <input> 要素にフォーカスを当てる方法を導入します。
サンプルコードはこちらです。
<input
id="sample"
onClick={() => document.getElementById("sample").focus()} />
上記を導入したら、次は CSS を調整して、<input> 要素の高さを高くします！
というのも、私はプロジェクトに Onsen UI という React コンポーネントライブラリを導入していたのですが、Developer tools で確認した時に、感覚的に <input> 要素の高さが低めというか、タッチで反応する範囲が狭いように見えたので、試しに他の要素に影響しない程度にちょっと高くしたところタッチ感度が改善したからです！
と言うことは、タッチ感度が悪いというよりも、そもそも要素をタッチできていなかったのですね…。
タッチ感度が原因だとばかり思いこんでいたので、思いつくのが遅くなってしまいました。
また、これは端末の性能にもよると思いますが、Xcode でプロジェクトを実行して iPhone にアプリをインストールした後、一度 Mac との接続を解除してから再度アプリを起動しなおすと、タッチ感度などの反応速度が速くなることもありました。
実際にアプリを実行するときには Mac と接続していないのだし、こちらを試してみて、それでも遅いようなら上記を試してみてもいいかもしれませんね。
以上、Cordova で開発したアプリを iOS で実行した時に、<input> 要素のタッチ感度が悪い時の対処法でした。
ご参考になれば幸いです。
