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下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
Javascript实现单选框效果
Dec 09 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反弹shell实现代码
2009/04/22 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
xml和web特殊字符
2009/04/28 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
JS获取动态添加元素的方法详解
2019/07/31 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
大学生标准推荐信范文
2013/11/25 职场文书
小学门卫岗位职责
2013/12/17 职场文书
创业计划书六个要素
2013/12/26 职场文书
白酒业务员岗位职责
2013/12/27 职场文书
怎么写好自荐书
2014/03/02 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python