v1.framework7安卓端Toolbar键盘Bug：需实现键盘显隐联动Toolbar显隐

我之前在Framework7 v1的安卓项目里踩过完全一样的坑！键盘弹起来的时候，Toolbar和Navbar死死占着顶部/底部，把输入区域和内容都挡住了，体验糟透了。要实现键盘弹出隐藏Toolbar、收起时显示的效果，用Framework7自带的键盘事件就能轻松搞定，给你一套实测有效的方案：

核心实现代码 #

基础版本（纯Framework7环境） #

如果是普通的Framework7网页项目，在初始化后添加键盘事件监听：

// 初始化Framework7实例
var myApp = new Framework7();

// 监听键盘弹出事件
myApp.keyboard.on('show', function() {
  // 隐藏所有Toolbar，可根据实际情况修改选择器（比如指定ID）
  $$('.toolbar').hide();
});

// 监听键盘收起事件
myApp.keyboard.on('hide', function() {
  // 显示Toolbar
  $$('.toolbar').show();
});

Cordova/PhoneGap适配版本 #

如果是基于Cordova的打包项目，记得把代码放在deviceready事件里，确保设备API加载完成后再执行：

document.addEventListener('deviceready', function() {
  var myApp = new Framework7();

  myApp.keyboard.on('show', function() {
    // 替换成你的Toolbar选择器，比如#bottom-toolbar
    $$('#bottom-toolbar').hide();
  });

  myApp.keyboard.on('hide', function() {
    $$('#bottom-toolbar').show();
  });
}, false);

关键说明 #

• 选择器精准度：如果页面有多个Toolbar，别用.toolbar这种全局选择器，改成特定的ID（比如#main-toolbar）或者更具体的类，避免误操作其他元素
• 动态元素适配：如果Toolbar是动态生成的，确保这段代码在Toolbar渲染完成后执行，或者把事件监听放在DOM加载完成的回调里（比如DOMContentLoaded）
• 效果验证：测试时注意不同安卓机型的键盘行为，有些特殊键盘可能触发时机略有差异，但Framework7的键盘事件已经做了兼容，基本不会有问题

这样设置后，键盘弹出时Toolbar会自动隐藏，收起时立刻恢复显示，完全符合你要的预期效果，再也不会出现遮挡内容的情况啦！

内容的提问来源于stack exchange，提问作者Mragank