ionic开发中,键盘弹出遮挡div内元素的解决方案
2017-04-05 15:48
1371 查看
采用ionic 开发中,遇到键盘弹出遮挡元素的问题。
以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮。
最终采用自定义指令解决了问题:
在包含用户名,密码和登陆按钮的div 或者 form 元素中直接使用
指令,就能使键盘弹出式,div 自动上移,把loginButton 显示出来
以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮。
最终采用自定义指令解决了问题:
.directive('popupKeyBoardShow', [function ($rootScope, $ionicPlatform, $timeout, $ionicHistory, $cordovaKeyboard) { return { link: function (scope, element, attributes) { window.addEventListener('native.keyboardshow', function (e) { angular.element(element).parent().parent().css({ 'margin-top': '-' + 80 + 'px' //这里80可以根据页面设计,自行修改 }) }) window.addEventListener('native.keyboardhide', function (e) { angular.element(element).parent().parent().css({ 'margin-top': 0 }) }) } } }]);
在包含用户名,密码和登陆按钮的div 或者 form 元素中直接使用
popup-key-board-show
指令,就能使键盘弹出式,div 自动上移,把loginButton 显示出来
相关文章推荐
- Flex 开发android程序键盘遮挡输入框解决方案
- 开发笔记---软键盘遮挡输入框和导航栏遮挡了内容的解决方案
- iOS开发 编辑框被系统弹出的软键盘遮挡问题
- ionic3开发系列——Android 端软键盘弹出后界面被压缩的解决办法
- android 弹出的软键盘遮挡住EditText文本框的解决方案
- ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
- android 弹出的软键盘遮挡住EditText文本框的解决方案
- iOS项目开发键盘弹出遮挡输入框问题解决方案
- ionic3开发过程中密码输入框随键盘的弹出,高度变小
- ionic开发中点击input时键盘自动弹出
- ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
- 【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题
- 移动端web开发之坑--IOS8下 上传图片点击取消后,弹出了软键盘遮挡输入框
- iOS开发 编辑框被系统弹出的软键盘遮挡问题
- flash遮挡DIV元素的问题总结
- ionic开发常见问题及解决方案(二)
- Android软键盘弹出界面遮挡解决方案。
- DIV弹出层无法遮罩ActiveX控件的解决方案
- Android 输入法键盘和activity页面遮挡和自动弹出问题解决
- IE下object元素遮挡div表单