1

初心者です。お世話になります。開発環境Monacaです。AngularJsの勉強を兼ねてOnsenUiコンポーネントを用いつつ、入力した文字数がヘッダーに表示される簡単なメモ帳を作成しました(入力画面のみ)。

しかしiphone(ios9.2)で確認したところ、textareaにフォーカスが入ると、表示されたキーボードによってヘッダー部分が上方にずれてしまいます。

テキスト入力中でもヘッダーが常時見えている状態にしたいのですが、どうしたらよいでしょうか。なお下記リンクの内容に従いCSSを設定してみましたが、実現できませんでした。
【iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう】
http://urx3.nu/s41T

アドバイスを頂ければ幸いです。
`    

            <!DOCTYPE HTML>
            <html ng-csp>
            <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
                <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
                <script src="components/loader.js"></script>
                <script src="js/winstore-jscompat.js"></script>
                <link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
                <link rel="stylesheet" href="components/loader.css">
                <link rel="stylesheet" href="css/style.css">
                <script>
                    ons.bootstrap();
                </script>
            </head>
            <body>
                <ons-navigator var="myNavigator" page="page1.html">
                </ons-navigator> 

                <ons-template id = "page1.html">
                    <ons-page>            
                            <ons-toolbar>                
                                <div class="center">メモ帳</div>                
                            </ons-toolbar>

                        <div>文字数:<span ng-bind="inputting.length"></span></div>

                        <section class="scroll">
                            <div class="contents" >                
                                <textarea class="textarea--transparent" ng-model="inputting" placeholder="Textarea"></textarea>
                            </div>
                        </section>
                    </ons-page>
                </ons-template>

            <style>
            .contents{
                width: 100%;
                height: 100%;
                position: fixed;
            }

            .textarea--transparent{
                width: 100%;
                height: 100%;    
            }

            .scroll {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              padding-top: 40px;
              overflow-y: scroll;
            }
            </style>
            </body>
            </html>

`
画像の説明をここに入力

1
  • 関数追加で似たような挙動ができましたが、画面が前後にスクロール(関数で位置調整)されたのち最初の画面位置に戻るといった挙動です。できれば上記のように位置調整中画面が動かないよにしたいです。 $(function(){ $(document) .on('focus', 'textarea', function(e) { var pos = $(window).scrollTop(); $('html, body').scrollTop(8); $('header').css({ top: pos }); }) .on('blur', 'textarea', function(e) { $('header').css({ top: 0 }); }); });
    – yuzu
    2016年2月13日 16:50

1 件の回答 1

0

それを解決するにはionic-plugin-keyboardというcordovaのプラグインを使用します。

https://github.com/driftyco/ionic-plugin-keyboard

キーボードが表示されても画面がスクロールしないようにするにはdisableScroll()にtrueを指定してください。Monacaデバッガ上では動作しないため、cordova.pluginsが有効かどうかチェックしています。

if (cordova.plugins)
    cordova.plugins.Keyboard.disableScroll(true);

この場合、textareaやinputが画面の下部にあってもキーボードで隠れてしまうので、native.keyboardshowイベントやnative.keyboardhideイベントでdiv等の高さを調整する必要があります。

window.addEventListener('native.keyboardshow', function (e)
{
    画面全体の高さ - e.keyboardHeight
});

window.addEventListener('native.keyboardhide', function ()
{
    元の高さに戻す
});

ただし外部のプラグインを使用するにはGoldプラン以上である必要があります。

1
  • Goldプランのお試し期間を利用し、無事教えて頂いた方法で解決いたしました。本当にありがとうございました。
    – yuzu
    2016年2月16日 16:17

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。