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 相关文章推荐
单元选择合并变色示例代码
May 26 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php 中的closure用法详解
2017/06/12 PHP
学习ExtJS table布局
2009/10/08 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
Js基础学习资料
2010/11/23 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Javascript中的 “&” 和 “|” 详解
2017/02/02 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
python运行其他程序的实现方法
2017/07/14 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python多任务及返回值的处理方法
2019/01/22 Python
单位工程竣工验收方案
2014/03/16 职场文书
党员对照检查材料
2014/09/22 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
js不常见操作运算符总结
2021/11/20 Javascript
SQL Server内存机制浅探
2022/04/06 SQL Server