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?
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.
1 Like
Hi,
Thanks for the tips
But what’d you mean about using vue?
I’m using vue-cli and don’t know that how to install this plugin??
are there anything like this to use in npm for importing to my vue project or not?
hi,
this is a cordova/phonegap/ionic plugin. Is yor project based in cordova? if not, this is no useful for you