ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)


Posted in Javascript onSeptember 06, 2016

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

可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案。

我就不仔细讲代码了,直接上图

angular.module('MyApp')
.directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$ionicPosition', function ($ionicScrollDelegate, $window, $timeout, $ionicPosition) {
return {
restrict: 'A',
scope: false,
link: function ($scope, iElm, iAttrs, controller) {
if (ionic.Platform.isIOS()) {
iElm.on('focus', function () {
var top = $ionicScrollDelegate.getScrollPosition().top;
var eleTop = ($ionicPosition.offset(iElm).top) / 2
var realTop = eleTop + top;
$timeout(function () {
if (!$scope.$last) {
$ionicScrollDelegate.scrollTo(0,realTop);
} else {
try {
var aim = angular.element(document).find('.scroll')
aim.css('transform', 'translate3d(0px,' + '-' + realTop + 'px, 0px) scale(1)');
$timeout(function () {
iElm[0].focus();
console.log(2);
}, 100)
} catch (e) {
}
}
}, 500)
})
}
}
}
}])
Javascript 相关文章推荐
javascript URL编码和解码使用说明
Apr 12 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 #Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 #Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 #Javascript
原生JS:Date对象全面解析
Sep 06 #Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 #Javascript
Vue.js每天必学之过渡与动画
Sep 06 #Javascript
Vue.js 父子组件通讯开发实例
Sep 06 #Javascript
You might like
JAVA/JSP学习系列之四
2006/10/09 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
python 实现多维数组转向量
2019/11/30 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
秋季校运动会广播稿
2014/02/23 职场文书
《小池塘》教学反思
2014/02/28 职场文书
模具专业自荐信
2014/05/29 职场文书
高一军训口号
2015/12/25 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang