22113


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

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

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

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

[code]

                <!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>
    
[/code]

`  
[![画像の説明をここに入力](https://i.stack.imgur.com/n7YyE.jpg)](https://i.stack.imgur.com/n7YyE.jpg)


CC BY-SA 3.0
2016-02-13T09:04:16.250
22040
2016-02-15T12:48:14.513
14390
question
javascript ios monaca onsen-ui html5
iosにてtextareaにフォーカスが入るとキーボードによってヘッダーが上にずれて見えなくなる


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

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

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

[code]

    if (cordova.plugins)
        cordova.plugins.Keyboard.disableScroll(true);
    
[/code]

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

[code]

    window.addEventListener('native.keyboardshow', function (e)
    {
        画面全体の高さ - e.keyboardHeight
    });
    
    window.addEventListener('native.keyboardhide', function ()
    {
        元の高さに戻す
    });
    
[/code]

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


CC BY-SA 3.0
2016-02-15T12:48:14.513
22113
2016-02-15T12:48:14.513
14414
22040
answer