采用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. Date相关

    处理时间是常见的需求,总结下Date类的相关知识 构建时间对象 Date 对象基于1970年1月1日(世界标准时间)起的毫秒数. 构建对象实例有多种方式: 不传入参数,默认以系统当前时间返回一个时间对 ...

  2. JSON库的使用研究(一)

    最近用到JSON,收集了一些资料,整理如下: 选择一个合适的JSON库要从多个方面进行考虑: 字符串解析成JSON性能 字符串解析成Java Object性能 Java Object转JSON性能 集 ...

  3. Activity的生命周期函数

    前言: 上一篇文章写了关于Activity生命周期和生命周期状态的介绍,这一篇文章给大家聊聊Activity生命周期函数. 主Activity: 应用程序的入口一般都是桌面应用程序图标,用户点击应用图 ...

  4. Salesforce Sales Cloud 零基础学习(三) Lead & Opportunity & Quote

    上一篇讲的是Account 和 Contact,本篇主要描述 Lead & Opportunity & Quote.他们的主要的作用如下: Lead 用来存储潜在客户. Opportu ...

  5. Android UI(一)Layout 背景局部Shape圆角设计

    Jeff Lee blog:   http://www.cnblogs.com/Alandre/  (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks ...

  6. docker - 容器里安装redis

    在docker中安装redis 使用命令行安装redis 下载并解压 wget http://download.redis.io/releases/redis-3.2.6.tar.gz tar -xv ...

  7. 进程间通信IPC-内存共享

    函数: (1)int shmget(key_t key, int size, int shmflg),开辟或使用一块共享内存. (2)void *shmat(int shmid, const void ...

  8. go os/exec执行外部程序

    Go提供的os/exec包可以执行外部程序,比如调用系统命令等. 最简单的代码,调用pwd命令显示程序当前所在目录: package main import ( "fmt" &qu ...

  9. php使用cURL上传图片

    上传文件和POST非常相似,都是通过表单采取POST方法提交的. 先新建一个接收文件的页面upload.php: var_dump($_POST); var_dump($_FILES); 再建立一个发 ...

  10. Spring的@Transactional事务注意事项

    1.@Transactional应该放在方法级别,不需要使用事务的方法,就不要放置事务,2.查询方法声明不要事务,否则对性能是有影响的.3.对同一个类里的方法调用, @Transactional无效 ...