質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.26%

  • JavaScript

    11779questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6444questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    756questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    496questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Cordova

    302questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 280

chartreuxx

score 3

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

手順は以下の通りです。

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

ということになります。

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/21 21:46 編集

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

    キャンセル

  • 2017/12/22 09:47

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

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

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

    キャンセル

  • 2017/12/23 10:21

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

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

    もう少し調べます。

    キャンセル

  • 2017/12/27 11:36

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

    キャンセル

  • 2017/12/28 10:44

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.26%

関連した質問

  • 受付中

    androidでのプッシュ通知がバックグラウンド動作しない

    cordovaを使用してハイブリットアプリを作成しています。 下記プラグインを使用してAndroidでプッシュ通知を行おうとしていますが、 アプリがバックグラウンドになった場合、

  • 受付中

    cordovaプラグインの自作について

    現在、cordovaのプラグインを自作し、そのプラグインを呼び出そうとしています。 その中で、わからないところがあります。 config.xmlに自分で作成したプラグインをfe

  • 受付中

    cordovaでpulguinの追加

    cordovaでアプリ開発を始めようと思っています。 そこで自作のプラグインをプロジェクトに追加するため、 プロジェクトディレクトで以下のコマンドを実行しました。 cordo

  • 受付中

    Cordovaとは?

    Cordovaとは何でしょうか? それと、Cordovaの特徴と使用するメリットを教えてください。 よろしくお願いいたします。

  • 受付中

    cordovaプッシュ通知がうまくいかない(Android)

    前提・実現したいこと いろんなサイトを見ながら、cordovaでAndroidのプッシュ通知を実装しようとしましたが、うまくいきません。 トークンを取得するところで詰まってます

  • 受付中

    listen EACCES 0.0.0.0:8000の意味が分かりません

    下記参考サイトで記載されている、cordova run browserを実行したいと考えています。 参考サイト 「runすると、ブラウザが立ち上がって、Cordovaのマス

  • 解決済

    Cordovaでカメラを起動したいが、起動することが出来ない

    現在Cordovaでカメラのプラグインを利用してカメラを起動させようとしているのですが、うまく起動することが出来ません。 以下のようにプラグインをインストール cordov

  • 受付中

    Cordovaアプリの正しい開発方法を教えてください

    iOS版とAndroid版のCordovaアプリを、それぞれmacとWindows(+AndroidStudio)で開発しています。 それぞれcordovaをインストールし、プ

同じタグがついた質問を見る

  • JavaScript

    11779questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6444questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    756questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    496questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • Cordova

    302questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。