How to hide the bottom toolbar while keyboard is on


#1

while typing in input field the bottom toolbar appear on the top of the keyboard. i want to hide toolbar while typing in input field… but how?


#2

Hi i use Vue js.
My solution was using a plugin.
ionic-plugin-keyboard


its deprecated now.
You should use cordova-plugin-ionic-keyboard if you choose the plugin solution

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

// Hide/Show toolbar
keyboardHideHandler(e){
  this.$$(".toolbar").each((i,v)=>{this.$$(v).show()})
},
keyboardShowHandler(e){
  this.$$(".toolbar").each((i,v)=>{this.$$(v).hide()})
}

Never use it, but is suggest to go with f7 solution:

app.toolbar.hide(toolbarEl, animate)
app.toolbar.show(toolbarEl, isAnimated)

Doc:
https://framework7.io/docs/toolbar-tabbar.html#toolbar-app-methods

so when the user click/tap the input you hide the toolbar.