键盘出现时无法查看和滚动离子模态的html视图

Question

我在离子项目中使用离子模态。模态清晰显示在页面上，但当我尝试在任何文本框中输入任何文本时，键盘出现在页面上。

键盘出现后，我无法看到模态的html，也无法滚动模态。  请参考截图。

谢谢。

Answer 1

等了很长时间并没有得到任何答案，所以我写了一些css来解决这个问题，这在我的项目和dominik中都有效 也尝试了这个。 see the comment by him

    @media(min-width: 680px){
    .modal{ top: 0; height: 70%; }
    body.keyboard-open.modal{ height: 90%; }
    body.keyboard-open.modal.scroll{ overflow-y: scroll !important; }
}
.overflow-scroll.keyboard-up:not(.keyboard-up-confirm){
    overflow-y: scroll;
    height: 100% !important;
    top: 0;
}

Answer 2

不得不提出这个问题。它对我有用，所以试一试：把代码放在你的 app.run

中

注意：当您在AndroidManifest.xml中设置 android：windowSoftInputMode =“adjustPan”时，通常会导致此问题

确保您的应用中包含jquery。

 window.addEventListener('native.keyboardshow', keyboardShowHandler);
  window.addEventListener('native.keyboardhide', keyboardHideHandler);

  function keyboardShowHandler(e){ 
  setTimeout(function() { 
    var originalHeight =  window.innerHeight-30; 
    var newHeight = originalHeight - e.keyboardHeight;
      $('ion-modal-view ion-content').css("height", newHeight); 
  }, 0);
    }

function keyboardHideHandler(e){ 
  setTimeout(function() { 
    var newHeight = '100%';
      $('ion-modal-view ion-content').css("height", newHeight); 
  }, 0);
 }