IONIC键盘弹出时,页面自动上移,导致上部元素不能显示的解决办法
IONIC键盘弹出时,页面自动上移,导致上部元素不能显示的解决方法
原文出处:http://blog.****.net/jiangbo_phd/article/details/52438418,感谢作者的分享。
keyboard
该问题只出现在IOS中。
在Android 和 iOS中, Ionic会试图阻止键盘的模糊输入以及聚焦元素,任何可以获取焦点的元素必须在一个滚动视图或一个类似于带有滚动视图的Content指令内。
在获取焦点时,它会试图阻止原生的滚动溢出,这可能会导致布局问题,比如将header挤到上面,并超出视野。
键盘修复可以和Ionic键盘插件最好的协同工作,尽管没有它,Ionic键盘插件也会执行良好。然而,如果你使用Cordova的话,就没有理由不用该插件。
使用步骤:
1.安装插件
cordova plugin add ionic-plugin-keyboard
这个插件是ionic在原有keyboard插件的基础上做了一些设置更改。
2.js中的代码配置
window.ionic.Platform.ready(() => { if (window.cordova && window.cordova.plugins.Keyboard) { window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); if (window.ionic.Platform.isIOS()) { window.cordova.plugins.Keyboard.disableScroll(true); } } });
说明:下面这段代码就是禁止header向上移动的。
window.cordova.plugins.Keyboard.disableScroll(true);