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 相关文章推荐
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
JavaScript实现打字游戏
Feb 19 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
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
表单提交验证类
2006/07/14 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
python解析xml文件操作实例
2014/10/05 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python中的推导式使用详解
2015/06/03 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
物业管理应届生求职信
2013/10/28 职场文书
大学生毕业自我评价范文分享
2013/11/07 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
面试感谢信范文
2015/01/22 职场文书
于丹论语心得观后感
2015/06/15 职场文书
Python预测分词的实现
2021/06/18 Python
MySQL数据库 安全管理
2022/05/06 MySQL