Ionic 2では、キーボードの上にある要素をキーボードの上に浮かせる方法は？

Question

（maybe in the works？）まだイオン2で私は時にキーボードショー私のメッセージ入力バーがキーボードの上に浮いしたいが、何のkeyboard-attach directive（like v1）がありませんように見えます。代替/回避策はありますか？

現在の行動：

募集行動：

は、ここに私のメッセージ入力バーのコードです：

<ion-toolbar position="bottom" *ngIf="userIsAdmin"> 

    <form (ngSubmit)="onSubmit(f)" #f="ngForm" class="message-form"> 

     <ion-badge class="message-form-badge">Admin</ion-badge> 

     <ion-input type="text" placeholder="Type a message..." ngControl="messageInput"></ion-input> 

     <button type="submit" small class="message-form-button">Send <ion-icon name="send"></ion-icon></button> 

    </form> 

</ion-toolbar> 

Answer 1

私は、IOS上で私の作品解決策を見つけました。

ブラウザで<ion-input>で<ion-item>を検査（IOSのためのSafariを使用してデバッグする）あなたは、イオンがスタイルposition: absolute;を持って<div class='input-cover'>を生成することを見つけることができます。

.input-cover { 
    position: static; 
} 

これは私のためのトリックを行なったし、あなたが入力フィールドに焦点を当てたときに、今、それがビューにスクロールすると、もはやキーボードの下に隠して、このすべてはありません以下のようにこれを上書きしますCSSを書きますバターが滑らかに働きます。

Answer 2

私も旧姓をしましたこれを実装するためにded。私はそれをし、それは完全に動作します。

最初にコードバプラグインのキーボードを使用する必要があります。開始時に cordova.plugins.Keyboard.disableScroll(true);と呼ぶので、キーボードは表示を押し上げません。第二 あなたはハンドラを使用してこのようなkeyboardshowとキーボード非表示イベントをリッスンする必要があります：あなたはこのようなイベントから、観察することができたより

cordova.plugins.Keyboard.disableScroll(true); 
        window.addEventListener('native.keyboardshow', this.dispatchMe); 
        window.addEventListener('native.keyboardhide', this.dispatchMeHide); 

    dispatchMe(e) { 
     var event = new CustomEvent('keyboardShown'); 
     event['keyboardHeight'] = e.keyboardHeight; 
     document.dispatchEvent(event); 
    } 

    dispatchMeHide() { 
     var event = new CustomEvent('keyboardShown'); 
     event['closed'] = true; 
     document.dispatchEvent(event); 
    } 

：

this.keyboardObservable = Observable.fromEvent(document, 'keyboardShown'); 

あなたはそれを聞くことができるより観察可能である。キーボードが開いている場合は、メッセージが表示されているコンテナの高さを変更します。あなたは基本的にキーボードの高さを低くしなければなりません。ここで私はあなたがこの

[ngStyle]="{'height': sectionHeight}" 

ようngStyleでこれらのプロパティを変更

this.chatService.keyboardObservable 
      .subscribe(data => { 
       if (data.closed) { 
        this.sectionHeight = 85 + '%'; 
        this.inputBottom = 0 + '%'; 
       } 
       else { 
        this.docHeight = document.body.clientHeight; 
        this.sectionHeight = ((this.docHeight - data.keyboardHeight - (document.getElementById('toptoolbar').clientHeight + document.getElementById('inputchat').clientHeight))/this.docHeight) * 100 + '%'; 
        this.inputBottom = data.keyboardHeight/this.docHeight * 100 + '%'; 
       } 

      }); 

と私はまた、chatappのためにこれを必要とすることをどうやっあり、今では完全に（あなたが回転した場合でも動作します、画面の肖像/風景モード）、入力は常にちょうどネイティブアプリケーションのようにキーボードの上に浮かぶ:)

私は、これはあなたを助けることを願っています！

Answer 3

私が使用して終了し、私は満足している1がある解決策：

1. 今完璧に動作

   代わり<ion-input type="text">

の定期 <input type="text">を使用して Keyboard.disableScroll(true);

を削除！

Answer 4

私は、Androidでこの問題を抱えていたので、私は、私は、個々のコンポーネントに入れることができ、サービスメソッドを作成しました。これは、<ion-content>タグの内側に個のフィールドを使用することに基づいています。

このContentクラスに加えsetScrollTop方法を利用します。

サービス

export class KeyboardService { 

    autoKeyboardScroll(content:Content, scrollBackAfterKeyboardClose?:boolean) { 
     if (!content) { 
      return; 
     } 
     var previousScrollTop = null; 
     function onKeyboardShow(e) { 
      // if the content no longer exists, stop the listener 
      if (removeListenersForMissingContent()) { 
       return; 
      } 
      previousScrollTop = content.getScrollTop(); 
      // find the input that's currently in focus 
      var focusedElement = document.activeElement; 
      if (focusedElement && ['INPUT', 'TEXTAREA'].indexOf(focusedElement.tagName)!==-1) { 
       // determine the total offset between the top of the "ion-content" and this element. 
       // we will do this by climbing up the dom until we reach the "ion-content" 
       var offsetTop = focusedElement.offsetTop + focusedElement.scrollHeight; 
       var parentEl = focusedElement.offsetParent; 
       while (parentEl && parentEl.tagName!=='ION-CONTENT') { 
        offsetTop += parentEl.offsetTop; 
        parentEl = parentEl.offsetParent; 
       } 
       // we want to move the input so that the bottom of the focused input is just above the keyboard 
       var contentDimensions = content.getContentDimensions(); 
       var newScrollTop = offsetTop - (contentDimensions.contentHeight - focusedElement.scrollHeight); 
       content.setScrollTop(newScrollTop); 
      } 
     } 
     function onKeyboardHide(e) { 
      // if the content no longer exists, stop the listener 
      if (removeListenersForMissingContent()) { 
       return; 
      } 
      // set the scroll top back to the initial position, if requested 
      if (scrollBackAfterKeyboardClose) { 
       content.setScrollTop(previousScrollTop); 
      } 
     } 
     function removeListenersForMissingContent() { 
      // if there is no content, remove the keyboard listeners 
      if (!content || content.getContentDimensions().contentHeight===0) { 
       window.removeEventListener('native.keyboardshow', onKeyboardShow); 
       window.removeEventListener('native.keyboardhide', onKeyboardHide); 
       return true; 
      } 
     } 
     // setup listeners 
     window.addEventListener('native.keyboardshow', onKeyboardShow); 
     window.addEventListener('native.keyboardhide', onKeyboardHide); 
    } 
} 

コンポーネント

@Component({ 
    template: `<ion-content> 
     <ion-list> 
      <ion-item> 
       <div style="height: 400px"></div> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 1</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 2</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 3</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 4</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 5</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-label>Field 6</ion-label> 
       <ion-input type="text"></ion-input> 
      </ion-item> 
     </ion-list> 
    </ion-content>` 
}) 
export class MyPage { 
    @ViewChild(Content) content: Content; 

    constructor(private: keyboardService: KeyboardService) {} 

    // add the keyboard scroll action to this page. this is added after the view has been created, 
    // so the content element will be avaialble. 
    ionViewDidEnter() { 

     // timeout seems to be required, to ensure that the content child is available 
     setTimeout(() => { 
      // set the keyboard to auto-scroll to the focused input, when it opens 
      this.keyboardService.autoKeyboardScroll(this.content); 
     }); 
    } 
}