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实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...
随机推荐
- 【PHP篇】输出方法
php开始处加:error_reporting(E_ALL & ~E_NOTICE); //不打印注意 echo: echo “字符串”; //也可为单引号 echo $变量名; ech ...
- 【jdbc】连接数据库从浅入深
一.回想 还记得以前自学的时候,刚接触到数据库,讲解的连接数据库的最基本的理论知识和方法,现在温习一下基础知识并总结如下! 1.JDBC连接数据库的基本流程 加载JDBC驱动程序 —> 提供JD ...
- javascript数组的属性、方法和清空-最全!!!(必看)
今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...
- linux运维工程师面试题收集
面试必考 mysql5和mysql6 有什么区别 mysql-server-5.5:默认引擎改为Innodb,提高了性能和扩展性,提高实用性(中继日志自动恢复) mysql-server-5.6:In ...
- python+appium的物理按键代码
代码就一句driver.keyevent()括号内填入的是物理按键的数字代号 代号表: 电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOM ...
- Chapter 4 Invitations——4
I wanted very much to talk to him, and the day after the accident I tried. 在发生事故之后我尽力尝试,我很想和他聊聊. The ...
- 痞子衡嵌入式:SEGGER J-Link仿真器硬件版本变迁
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是J-Link仿真器版本变迁. 硬件版本 主控芯片 固件升级工具 V7 ARM7TDMI, 55MHz Atmel AT91SAM7S64 ...
- MyBatis源码解析(五)——DataSource数据源模块之非池型数据源
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6675633.html 1 回顾 上一篇中我解说了数据源接口DataSource与数据源工厂 ...
- shell编程基础(二): shell脚本语法之分支语句和循环语句
一.分支语句 1.条件测试:test [ 命令test或[可以测试一个条件是否成立,如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为1(注意与 ...
- SQL Server 分页编号的另一种方式
今天看书讲T-SQL,看到了UNBOUNDED PRECEDING,就想比对下ROW_NUMBER()的运行速度. sql及相关的结果如下,数据库中的数据有5W+. ROW_NUMBER(): SET ...