ionic开发中,输入法键盘弹出遮挡住div元素
采用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元素的更多相关文章
- ionic项目中 软键盘弹出之后的问题:
Android SDK目前提供的软键盘弹出模式接口只有两种: 一是弹出时自动回冲界面,将所有元素上顶: 一种则是不重绘界面,直接将控件元素遮住: 1. ionic 中弹出键盘遮挡住输入框(覆盖 ...
- Android中软键盘弹出时关于布局的问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncre ...
- Android中软键盘弹出时底部菜单上移问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
- 微信公众号系列 --- ionic在IOS的键盘弹出问题
在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个 ...
- Android虚拟键盘弹出时挡住EditText解决方法
在manifest的activity节点使用 Xml代码 <activity android:windowSoftInputMode="adjustResize"/> ...
- iOS学习——tableview中带编辑功能的cell键盘弹出遮挡和收起问题解决
最近在项目中经常用到UITableView中的cell中带有UITextField或UITextView的情况,然后在这种场景下,当我们点击屏幕较下方的cell进行编辑时,这时候键盘弹出来会出现遮挡待 ...
- 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。
转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...
- html5 虚拟键盘弹出挡住底部的输入框解决方案
问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...
- Android软键盘弹出时布局问题
最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...
随机推荐
- Python - 使用Pylint检查分析代码
1-简介 Home Page : https://www.pylint.org/ 检查语法错误,是否遵守编码风格标准.潜在的问题等: 支持自定义配置:例如显示或隐藏特定的警告,并且可以通过编写插件来添 ...
- 安卓ListView行详细内容展示页编写和下拉刷新实现
ListView行详细内容展示页: 使用轻量级的Fragment实现Listview行内容简单的详细信息展示: 值得注意的是: 1. 主布局(打开它的Activity)必须是FrameLayout布局 ...
- Linux 用脚本编写搭建yum本地仓库
Linux 用脚本编写搭建yum本地仓库 源码如下: #!/bin/bash #该脚本用于自动化搭建本地yum仓库 #挂载光盘 #作者:雨中落叶 #博客:https://www.cnblogs.com ...
- 召回率,精确率,mAP如何计算
首先用训练好的模型得到所有测试样本的confidence score,每一类(如car)的confidence score保存到一个文件中(如comp1_cls_test_car.txt).假设 ...
- mysql 开发进阶篇系列 22 磁盘I/O问题(从linux操作系统上优化)
1. 使用Symbolic Links分布I/O mysql的数据库名和表名是与文件系统的目录名和文件名对应的,默认情况下,创建的数据库和表都存放在参数datadir定义的目录下.如果不使用RAID或 ...
- Android--UI之ImageView
前言 这篇博客聊一聊在Android下ImageView的使用,在此篇博客中,会讲解到ImageView的一些属性的使用,以及ImageView展示图片的放大.缩小.旋转等操作.最后再讲解一下Andr ...
- 函数式编程之-拒绝空引用异常(Option类型)
众多语言都会设计Option类型,例如Java 8和Swift都设计了Optional类型.其实这种类型早就出现在了函数式语言中,在OCaml和Scala中叫Option,在Haskell中叫Mayb ...
- Dubbo 源码解析四 —— 负载均衡LoadBalance
欢迎来我的 Star Followers 后期后继续更新Dubbo别的文章 Dubbo 源码分析系列之一环境搭建 Dubbo 入门之二 --- 项目结构解析 Dubbo 源码分析系列之三 -- 架构原 ...
- Go基础系列:构建go程序
hello world 从一个简单的程序开始解释,将下面的内容放进test.go文件中,路径随意: package main import ( "fmt" ) func main( ...
- Go基础系列:简单数据类型
每一个变量都有数据类型,Go中的数据类型有: 简单数据类型:int.float.complex.bool和string 数据结构或组合(composite):struct.array.slice.ma ...