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自动添加表单项的方法
Jul 13 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Angular2数据绑定详解
Apr 18 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
使用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
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
python sort、sorted高级排序技巧
2014/11/21 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
学习经验交流会主持词
2014/04/01 职场文书
旅游安全协议书
2014/04/21 职场文书
安全月宣传标语
2014/10/07 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
出纳试用期自我评价
2015/03/10 职场文书
班主任工作总结范文
2015/08/13 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android