采用ionic 开发中,遇到键盘弹出遮挡元素的问题。

以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮。

最终采用自定义指令解决了问题:

  

 .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
})
})
}
}
}]);

   引用:将命名好的指令名 :popupKeyBoardShow,按驼峰拆开用“-”连接成小写,如:popup-key-board-show。

  <popup-key-board-show>这里放div内容</popup-key-board-show>。如:

  

<form action="">
<popup-key-board-show>
<div>
<input type="text" ng-model="user.name" placeholder="用户名">
</div>
<div style="margin: 24px 0;">
<input type="password" ng-model="user.pwd" placeholder="密码">
</div>
<div class="Login">登录</div>
</popup-key-board-show> </form>

  

ionic开发中,输入法键盘弹出遮挡住div元素的更多相关文章

  1. ionic项目中 软键盘弹出之后的问题:

    Android SDK目前提供的软键盘弹出模式接口只有两种: 一是弹出时自动回冲界面,将所有元素上顶: 一种则是不重绘界面,直接将控件元素遮住:     1. ionic 中弹出键盘遮挡住输入框(覆盖 ...

  2. Android中软键盘弹出时关于布局的问题

     当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncre ...

  3. Android中软键盘弹出时底部菜单上移问题

    当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

  4. 微信公众号系列 --- ionic在IOS的键盘弹出问题

    在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个 ...

  5. Android虚拟键盘弹出时挡住EditText解决方法

    在manifest的activity节点使用 Xml代码   <activity android:windowSoftInputMode="adjustResize"/> ...

  6. iOS学习——tableview中带编辑功能的cell键盘弹出遮挡和收起问题解决

    最近在项目中经常用到UITableView中的cell中带有UITextField或UITextView的情况,然后在这种场景下,当我们点击屏幕较下方的cell进行编辑时,这时候键盘弹出来会出现遮挡待 ...

  7. 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

  8. html5 虚拟键盘弹出挡住底部的输入框解决方案

    问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

  9. Android软键盘弹出时布局问题

    最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...

随机推荐

  1. PHP的会话控制

    页面数据的作用域: 当前页共享数据:变量.常量 两个页面间传递数据:get,post 跟踪用户的多页面数据共享(会话):session.cookie 全局数据共享:文件.数据库.memcached C ...

  2. python(leetcode)-283移动零

    给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必须在原数组上操作, ...

  3. ionic2 关于启动后白屏问题跟app启动慢的问题

    问题描述: 在ionic2下创建的项目打包生成apk,运行在真机上,进入启动页然后有5秒左右的白屏情况才进入首页,在真实项目中更严重,启动画面后更有时候十几秒都是白屏,体验性非常差. 在各种搜索之下, ...

  4. Hibernate实体类注解中如何忽略某些字段的映射

    使用注解 @Transient在该字段上 例如: @Transient private int  name: 这样在映射数据表和对象关系时候就不会报在表中不存在该字段的问题:

  5. 全能系统监控工具dstat

    一.什么是dstat? 通过man帮助,可以看到官方对dstat的定义为:多功能系统资源统计生成工具( versatile tool for generating system resource st ...

  6. 扒光IT界江湖骗子巴蜀万明的底裤

    扒光IT界江湖骗子巴蜀万明的底裤 北京IT界出了个江湖骗子,名叫万明,常年在北京IT界乃至中国IT界招摇撞骗.因其姓名太过大众化,容易误伤他人,对搜索引擎也不够友好,所以前缀以其招摇撞骗常用的一家空壳 ...

  7. ACM--string常见用法

    在ACM竞赛中,常常需要将读入的数字的每位分离出来,如果采用取余的方法,花费的时间就会太长,这时候,我们可以将读入的数据当成字符串来处理,这样就方便.省时多了.下面这个程序演示了求一个整数各位的和: ...

  8. Perl的命令行参数和ARGV

    程序名:$0 $0表示当前正在运行的Perl脚本名.有3种情况: 如果执行方式为perl x.pl,则$0的值为x.pl而非perl命令本身 如果执行方式为./x.pl,则$0的值为./x.pl 如果 ...

  9. 分布式系统监视zabbix讲解十之监控tomcat--技术流ken

    前言 在Zabbix中,JMX监控数据的获取由专门的代理程序来实现,即Zabbix-Java-Gateway来负责数据的采集,Zabbix-Java-Gateway和JMX的Java程序之间通信获取数 ...

  10. iOS高效裁剪图片圆角算法

    项目有个需求:裁剪图片,针对头像,下面是要求: 大家可以看到这张图片的圆角已经去除,下面说说我在项目利用了两种方式实现此裁剪以及查看技术文档发现更高效裁剪方式,下面一一讲解:看下来大约需要15-20分 ...