키보드가 나타난 후 후속 툴바

Question

툴바를 아래쪽에 두는 방법, 키보드가 나타난 후 위로 올라가지 마십시오 ?? 내 코드가 잘못되었거나 cordova 또는 framework7에 대한 플러그인이 적습니다! 어쩌면 누군가가 나를이 문제를 해결하는 데 도움이 될 수 있습니다.

<div class="views"> 
 
    <div class="view"> 
 
     <div class="pages"> 
 
    <div data-page="viewprofil" class="page navbar-fixed toolbar-fixed"> 
 
     <div class="navbar" style="background-color: #1abc9c;box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);"> 
 
      <div class="navbar-inner" > 
 
       <div id="kembali" class="left sliding button"> 
 
       <i class="icon icon-back"></i> 
 
       </div> 
 
       <div class="left sliding">Akun</div> 
 
      </div> 
 
     </div> 
 

 
     <div class="toolbar toolbar-bottom"> 
 
     <div class="toolbar-inner"> 
 
      <a id="kembali"> 
 
       <i class="fa fa-home fa-2x" aria-hidden="true"></i> 
 
      </a> 
 
      <a href="{{pathFor 'history'}}" > 
 
       <i class="fa fa-clock-o fa-2x"></i> 
 
      </a> 
 
      <a href="{{pathFor 'viewprofil'}}" class="toolbar-aktif"> 
 
       <i class="fa fa-user fa-2x"></i> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
    <div class="page-content" style="background-color: #ecf0f1;color: #444444;"> 
 
    <div class="content-block-title" style="top: 0px; margin-top:0px;"><h2>Pengaturan Akun</h2></div> 
 
    <div class="list-block"> 
 
     <ul class="box-data"> 
 
     <li> 
 
      <div class="item-content"> 
 
      <div class="item-media"><i class="icon material-icons">person</i></div> 
 
      <div class="item-inner"> 
 

 
       <div class="item-input"> 
 
       <input id="namalengkap" type="text" placeholder="Nama lengkap" value="{{nama}}"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="item-content"> 
 
      <div class="item-media"><i class="icon material-icons">email</i></div> 
 
      <div class="item-inner"> 
 

 
       <div class="item-input"> 
 
       <input type="text" value="{{email}}" disabled> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <li class="accordion-item"> 
 
      <a class="item-content item-link"> 
 
       <div class="item-media"><i class="icon material-icons" aria-hidden="true">lock</i></div> 
 
       <div class="item-inner"> 
 
       <div class="item-title">Kata Sandi</div> 
 
       </div> 
 
      </a> 
 
      <div class="accordion-item-content"> 
 
       <div class="content-block" style="margin-left: 80px;"> 
 
       <input type="password" placeholder="Kata Sandi baru"> 
 
       </div> 
 
       <div class="content-block" style="margin-left: 80px;"> 
 
       <input type="password" placeholder="Ulangi Kata Sandi"> 
 
       </div> 
 
      </div> 
 
      </li> 
 
     </li> 
 

 
     <li> 
 
      <div class="item-content"> 
 
      <div class="item-media"><i class="icon material-icons">call</i></div> 
 
      <div class="item-inner"> 
 
       <div class="item-input"> 
 
       <input type="tel" placeholder="No. Handphone" value="{{notelp}}"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </li> 
 

 
     </ul> 
 
     <div class="content-block"> 
 
     <div class="logButton button button-fill button-raised color-red" id="logout" ><i class="fa fa-power-off " aria-hidden="true"></i>&nbsp;Keluar</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
</div> 
 
</div> 
 
</div>

After

Before

Answer 1

나는 바닥에 보관하는 아이디어가 배출되지 않습니다,하지만 여기에 빠른 수정입니다 결코 :

var myApp = new Framework7({ 
    material: true 
}); 

var mainView = myApp.addView('.view-main', { 
}); 

$$ = Dom7; 

$$('#my-input').on('focus', function() { 
    mainView.hideToolbar(); 
}); 

$$('#my-input').on('blur', function() { 
    mainView.showToolbar(); 
}); 

간단히 입력 포커스 및 흐림 이벤트에 대한 도구 모음 표시 및 숨기기

라이브 예 : https://jsfiddle.net/wowq3n64/