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 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 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
一个显示天气预报的程序
2006/10/09 PHP
用PHP读取IMAP邮件
2006/10/09 PHP
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
PHP学习之整理字符串
2011/04/17 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
Javascript模块模式分析
2008/05/16 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
公交公司毕业生求职信
2014/02/15 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
金融与证券专业求职信
2014/06/22 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
邀请函怎么写
2015/01/30 职场文书
入队仪式主持词
2015/07/04 职场文书
护士旷工检讨书
2015/08/15 职场文书
python基础之文件处理知识总结
2021/05/23 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏