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添加输出窗口的代码
Feb 07 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
js实现音乐播放控制条
Sep 09 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
javascript表单验证大全
2015/08/12 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Pycharm设置界面全黑的方法
2018/05/23 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python如何输出整数
2020/06/07 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
关于python中remove的一些坑小结
2021/01/04 Python
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
大学生应聘自荐信
2013/10/11 职场文书
新学期校长寄语
2014/01/18 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书