cordova スマホで文字を入力している時指でタッチした所にカーソルを合わせるやり方(inputタグ等)

Question

cordovaを用いてハイブリッドアプリを作成しています。
スマホで文字を入力している時にタッチした位置にカーソルを移動できないのですが、
できる方法はあるのでしょうか？

Answer 1

できます。
ただ、難易度は高いです。

手順は以下の通りです。

１．テキスト入力対象のDOMをタップする。
２．DOMがタップされた際のイベントで、そのときにタップされた要素がなんなのかを識別する情報（DOMのidなど）をどこか（グローバル変数など）に保持する。
３．ソフトウェアキーボードが表示される。
４．ソフトウェアキーボードが表示された際のイベントで、２．で保持したDOMの情報を取得し、その箇所まで画面をスクロールさせる。

ということになります。

上記の中で難しいのは「DOMがタップされた際のイベント」と「ソフトウェアキーボードが表示された際のイベント」、「その箇所まで画面をスクロールさせる」というところでしょうか。
利用しているライブラリやフレームワークによって実現方法は様々ですが、一例として私の実現例を示しますと以下の通りです。

DOMがタップされた際のイベント　→　AngularJSのディレクティブで実現
ソフトウェアキーボードが表示された際のイベント　→　ons.softwareKeyboard.onで実現　※この場合、ionic-plugin-keyboardというCordovaプラグインが必要なので、カスタムCordovaプラグインが利用できないプランをご利用の場合はこの方法は採用できません。
その箇所まで画面をスクロールさせる　→　jQuery.scrolltop()で実現

実現の負荷が割と高いので、そこまでやる必要があるかどうかという判断、回避策（テキスト入力は画面上部にある要素のみにするなど）で代替できないかという判断は必要かと思います。

※ons.softwareKeyboard.onはリファレンスに記載がないような気がしますね。以前はどこかに記載があったように思いますが、サポート外なのでしょうか・・。

Comments

[chartreuxx]

すみません。質問の仕方が悪かったです。。
例えば「あいうえお｜」と入力している時「お」にいまカーソル？というか「｜」みたいな次入力される位置みたいなのありますよね。
そして例えば「う」を消したい時「お」と「え」を消していくのではなくタップで「う」の位置までタップで行きたいのですが今できていないのです。

[akabee]

すみません、違うことを答えてしまいました。それはMonacaでは制御できませんね。
ちなみに私の端末でMonacaで開発したアプリを操作する場合はそのようなカーソル移動はできています。OSはAndroidです。

・ソフトウェアキーボードは何を利用していますか（この質問の意味は分かりますか）。
・問題の出る端末で他のアプリ（例えばLINEやGmail）の文字入力を行った場合、同様の事象が発生しますか。
・問題の出る端末以外で動作させても同様の動作となりますか。
・他の方に操作してもらっても同じ動作となりますか。

このあたりを調べる必要があるかと思います。

[chartreuxx]

返信ありがとうございます。
まずMonacaですが、最初は使用していたのですが自分にはデメリットが多く、自分でcordovaを用いて開発しています。すみませんMonacaタグ消しておきます。
自分もOSはAndroidです。

すみません。調べましたが結局原因がわからず。。
・ソフトウェアキーボードについてよくわかりませんが設定で変えたりしていません。
・Line等で試しましたが発生していませんでした。
・もうアプリとして配信して割とDLされていて、他の方(自分と端末の種類が異なる)から同様の報告がありました。

もう少し調べます。

[KNaito]

この問題は、UIWebViewの問題の気がします。UIWebView自体、iOSのバージョンにより細かい動作が違うので、なんとも言えませんが。
タップした位置にカーソルを動かしたいのであれば、Cordovaを利用しているのなら、WKWebViewエンジンを使って見てはいかがでしょうか？ WKWebViewにもまだちょっと問題はありますが、Safariにより近く、TineMCEなどもUIWebViewより良い動作をします。

[chartreuxx]

すみません。IOS版では動作できています。
androidのみでの事象となっています。