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实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...
随机推荐
- 解决关于ios访问相机闪退问题
在mac上的ionic3项目打包成苹果app,系统版本是10.3.3 . 当调用相机的时候出现闪退情况,这是调试出现的问题: This app has crashed because it attem ...
- [Shell]sed命令在MAC和Linux下的不同使用方式
---------------------------------------------------------------------------------------------------- ...
- 关于EF的三种分类----CodeFirst
新建StudentInfo.cs using System; using System.Collections.Generic; using System.ComponentModel.DataAnn ...
- OpenCV添加中文(五)
OpenCV添加文字的方法putText(...),添加英文是没有问题的,但如果你要添加中文就会出现"???"的乱码,需要特殊处理一下. 下文提供封装好的(代码)方法,供OpenC ...
- Jenkins持续集成学习-搭建jenkins问题汇总
目录 Jenkins持续集成学习5-搭建jenkins问题汇总 目录 前言 问题列表 nuget还原包问题 编译问题 SVN更新问题 参考文档 Jenkins持续集成学习5-搭建jenkins问题汇总 ...
- R语言实战(一)——基础入门
从今天开始接触R语言,主要参考的书籍是<R语言实战>. 1.安装R语言程序 Windows:http://mirror.bjtu.edu.cn/cran/ Linux:apt-get in ...
- RNN入门(一)识别MNIST数据集
RNN介绍 在读本文之前,读者应该对全连接神经网络(Fully Connected Neural Network, FCNN)和卷积神经网络( Convolutional Neural Netwo ...
- Python爬虫之使用Fiddler+Postman+Python的requests模块爬取各国国旗
介绍 本篇博客将会介绍一个Python爬虫,用来爬取各个国家的国旗,主要的目标是为了展示如何在Python的requests模块中使用POST方法来爬取网页内容. 为了知道POST方法所需要传 ...
- Spring MVC 学习总结(十一)——IDEA+Maven+多模块实现SSM框架集成
一.SSM概要 与SSH(Struts/Spring/Hibernate/)一样,Spring+SpringMVC+MyBatis也有一个简称SSM,Spring实现业务对象管理,Spring MVC ...
- C#操作DbCommand类
一.常用属性 名称 说明 CommandText 获取或设置要对数据源执行的 Transact-SQL 语句.表名或存储过程 CommandTimeout 获取或设置在终止执行命令的尝试并生成错误之 ...