web-dev-qa-db-ja.com

Ionic 2キーボードが表示されるとフォームが上がる

ionic 2.の最新バージョンを使用しています。私のコードには<ion-content padding><form></form></ion-content>内部にテキスト入力があります。 Androidに何かを入力しようとすると、ページ全体がキーボードで押し上げられます。

htmlファイル

<ion-content class="login-screen" padding>
  <form (ngSubmit)="login()" novalidate>
    <ion-list>
      <ion-item>
        <ion-label fixed>Username</ion-label>
        <ion-input type="text" name="username" [(ngModel)]="username" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password" name="password" [(ngModel)]="password" required></ion-input>
      </ion-item>
    </ion-list>
    <button ion-button full type="submit">Login</button>
  </form>
  <button ion-button clear full outline type="button" (click)="openModal()">Forgot Password?</button>
</ion-content>

解決策はありますか？

angulartypescriptionic-frameworkionic2ionic3
15
tushar balar

これはすべてRC4で修正される予定です（まもなく）。つまり、入力がフォーカスされているときにスクロールを無効にするには、これをconfigオブジェクトに（@NgModuleで）追加します。

...
imports: [
    IonicModule.forRoot(MyApp, {
        scrollAssist: false, 
        autoFocusAssist: false
    }),
    ...
],
...

これら2つのプロパティの非常に良い説明を見つけることができます here ：

ただし、Ionic2のデフォルトでは、コンテンツの下部にパディングを追加することでキーボードのスライドオーバーを補正し（「scrollAssist」）、スクロールしてビューポート内にフォーカスした入力要素を保持するための追加機能があります（ 「autoFocusAssist」）。 scrollAssistとautoFocusAssistの両方には、まだ公開されていないように見える設定でスイッチがうまく実装されています。

ionic-plugin-keyboardを使用して、ネイティブブラウザによるコンテンツペインのプッシュ/スクロールを停止し、キーボードをスライドさせて既存のコンテンツをカバーすることもできます。

this.platform.ready().then(() => {
    StatusBar.styleDefault();
    Splashscreen.hide();

    Keyboard.disableScroll(false); // <- like this

    // ...

[〜＃〜] update [〜＃〜]

@Luckylookeがコメントで言及したように：

Keyboard.disableScroll（）、iosおよびwindowsサポート

UPDATE II

Ionic 3.5.xはキーボードにまだ問題があるようです。次の設定はUI/UXの観点から（デフォルトと比較して）より良い結果を生成することがわかりました。 ：

@NgModule({
    declarations: [
        MyApp,
        //...
    ],
    imports: [
        //...
        IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
    ]
})
export class AppModule { }

scrollAssist: trueを保持することにより、ページの下部近くにある場合にキーボードによって入力が非表示になることを回避し、scrollPadding: falseを設定することにより、キーボードを非表示にした後の空の空白に関連するいくつかの奇妙なバグも回避します。

44
sebaferreras

このページの.tsにこのメソッドを追加します

ionViewWillEnter() {
  this.content.resize();
}

私のシナリオは次のとおりです。このページでキーボードが呼び出されますが、前のページに戻ると、ページ全体が表示されます。この方法で解決しようとすると、ionic2を使用します。

0
iamlanwenliang

here のようなスクロールの入力とフォームにはいくつかの問題がありますので、次のRCで修正されるまで待つことをお勧めします。コードフォールトではなくionic 。

0
Fernando Del Olmo

このプロパティをapp.module.tsのionicModuleに追加するだけです。私のために働く。

IonicModule.forRoot(MyApp, {
      scrollAssist: false, 
      autoFocusAssist: false
    })
0
Sreekanth Karini

IonicプロジェクトのiOSプラットフォームからiOSワークスペースを開き、MainViewController.mで以下のメソッドを記述します

/////////////--------------------------//////////////
/*
 *Description: this method was trigger by selector keyboarwillhide from notification
 */
-(void)keyboardWillHide
{
    if (@available(iOS 12.0, *)) {
        WKWebView *webview = (WKWebView*)self.webView;
         for(UIView* v in webview.subviews){
            if([v isKindOfClass:NSClassFromString(@"WKScrollView")]){
                UIScrollView *scrollView = (UIScrollView*)v;
                [scrollView setContentOffset:CGPointMake(0, 0)];
             }
          }
     }
}

NotificationCenterを介してviewDidLoadの上記のメソッドを呼び出します

- (void)viewDidLoad
{
    [super viewDidLoad];

    /**
     * observer notification when keyboard will hide
     */

    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillHide)
                                                 name:UIKeyboardWillHideNotification
                                               object:nil];
}
0
Shahab Rauf