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 相关文章推荐
html下载本地
Jun 19 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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 输出简单动态WAP页面
2009/06/09 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python的迭代器和生成器
2015/07/29 Python
Python中random模块生成随机数详解
2016/03/10 Python
python学习 流程控制语句详解
2016/06/01 Python
git进行版本控制心得详谈
2017/12/10 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
卫生标语大全
2014/06/21 职场文书
节电标语大全
2014/06/23 职场文书
2014年检验员工作总结
2014/11/19 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
二年级数学教学反思
2016/02/16 职场文书
合作意向书范本
2019/04/17 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
MYSQL 表的全面总结
2021/11/11 MySQL