键盘出现在材料中后要跟进的工具栏

Question

如何使工具栏保持在底部，键盘出现后不要上顶？ 我的代码有什么问题，或者更少的cordova或framework7的插件！也许有人可以帮我解决这个问题。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/