cordovaでキーボードを出したままに

Question

cordova + ionicにて開発しています。

テキスト入力（textarea）とボタンを配置し、ボタンを押下するたびにテキスト入力の文字列をリストへ追加していくイメージの仕様を考えています。

ここで、テキスト入力へフォーカスすることで出現したソフトウェアキーボードがボタンを押下したタイミングで収納されます。これ自体は自然な動作なのですが、今回は次々と入力していきたいので、追加のたびに収納していては不便です。

ボタン押下後テキストへフォーカスを戻し、かつ、キーボードの収納を止める（自動でなく手動で収納する）ことはできないのでしょうか？

また、returnキーの入力で追加する仕様も考えましたが、改行も取り扱いたいのでこちらでは厳しいです。

よろしくお願いします！

Answer 1

ionic3ですが解決策が見つかりましたので投稿します。

inputBlurringという設定をfalseにすることでinputやtextarea以外の要素をタッチしてもキーボードが隠れずに連続入力が可能となりました。

ただし、button要素を使用したり、(click)にてクリックイベントをハンドルすると再び隠れるようになります。
私は、div要素にて(touchstart)を使用することで回避しました。
button要素や(click)でないとダメな理由がある方は・・・。

まとめ
１、app.module.tsのIonicModuleへinputBlurringを加えてfalseを設定する。

@NgModule({
    imports: [
        IonicModule.forRoot(MyApp, {
            inputBlurring: false
        })
    ]
})

２、タッチした時にキーボードを隠したくない（連続入力したい）要素をbuttonではなくdivで追加する。
３、追加したdiv要素へ(touchstart)にてタッチ時のイベントをハンドルする。

<ion-content>
    <textarea></textarea>
    <div (touchstart)="send()">send</div>
</ion-content>

こうすることで、ボタン押下ごとにキーボードが隠れてしまう動作を無効にできました。
チャット画面のように連続投稿する仕様には必要不可欠かと思います。
同じ悩みをお持ちの方のお役に立てれば幸いです。
私は２年悩みましたので・・・。

Answer 2

Monaca＋独自フレームワークで開発しています。

ionicのことは知りませんが、<input type="button">であれ<button>であれテキスト入力からフォーカスを奪うので、結果としてキーボードが収納されます。

収納を避けるためにはフォーカスを奪わなければ良いので、ボタンを模したUI部品を<div>で作ってそれを使うというのはどうでしょうか。

ソースは公開できませんが私の方ではそのやり方で実現させています。

Comments

[mitsunori]

nandai様
ご回答ありがとうございます。

「cordova + ionic」環境で試してみたところ、
テキストからフォーカスが無くなりキーボードは収納されてしまいました。
同様に「cordova + onsenui」でも試した結果も同じでした。

しかし、cordova単体環境であればフォーカスは奪われずにキーボードを出したままにすることができました。
このことからionicとonsenuiの仕様によるものだと推測しています。
共通点として思い浮かぶのは「AngularJS」・・・

cordova単体ならできることなので原因を特定できれば回避できる気がします。
もう少し探ってみます！