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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 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来写记数器(详细介绍)
2006/10/09 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
资料员岗位职责
2013/11/17 职场文书
财务负责人任命书
2014/06/06 职场文书
绿色环保口号
2014/06/12 职场文书
2014年度考核工作总结
2014/12/24 职场文书
导游词范文
2015/02/13 职场文书
工会积极分子个人总结
2015/03/03 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
微信小程序调用python模型
2022/04/21 Python