ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

 更新时间:2016年09月06日 14:33:10   作者:寂寞的天空GM  
在使用ionic开发ios系统微信的时候遇到一个bug,在填写表单的时候键盘会挡住输入框。下面小编给大家带来了ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题),非常不错,有需要的朋友参考下吧

在使用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)
})
}
}
}
}])

相关文章

  • js判断两个数组是否存在相同元素的四种方法

    js判断两个数组是否存在相同元素的四种方法

    这篇文章主要给大家介绍了关于js判断两个数组是否存在相同元素的四种方法,js中是不能直接用==或者===来计算两个数组是否相等的,那么就需要对数组的值进行比较,需要的朋友可以参考下
    2023-07-07
  • 浅谈javascript函数劫持[转自xfocus]

    浅谈javascript函数劫持[转自xfocus]

    javascript函数劫持,也就是老外提到的javascript hijacking技术。最早还是和剑心同学讨论问题时偶然看到的一段代码
    2008-02-02
  • innerHTML在Mozilla Firefox和Opera下执行的一个特例情况。

    innerHTML在Mozilla Firefox和Opera下执行的一个特例情况。

    innerHTML在Mozilla Firefox和Opera下执行的一个特例情况。...
    2007-01-01
  • js确认删除对话框适用于a标签及submit

    js确认删除对话框适用于a标签及submit

    这篇文章主要介绍的是一个js确认删除对话框适用于a标签及submit,非常好用,需要的朋友不要错过
    2014-07-07
  • VSCode中如何利用d.ts文件进行js智能提示

    VSCode中如何利用d.ts文件进行js智能提示

    这篇文章主要给大家介绍了关于VSCode中如何利用d.ts文件进行js智能提示的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2018-04-04
  • 原生JS实现小小的音乐播放器

    原生JS实现小小的音乐播放器

    这篇文章主要为大家详细介绍了原生JS实现音乐播放器,支持循环、随机播放,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 纯js实现瀑布流布局及ajax动态新增数据

    纯js实现瀑布流布局及ajax动态新增数据

    这篇文章主要介绍了基于javascript实现瀑布流布局,及ajax动态新增数据的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript设计模式中的桥接和中介者模式

    JavaScript设计模式中的桥接和中介者模式

    这篇文章主要介绍了JavaScript设计模式中的桥接和中介者模式,桥接设计模式是一种偏向于组合的设计模式,而非继承的设计模式,实现的细节从一个模块推送给另一个具有单独模块的对象,而中介者设计模式是指通过一个中介者对象封装一系列的对象交互
    2022-06-06
  • js实现中文转拼音的完整步骤记录

    js实现中文转拼音的完整步骤记录

    这篇文章主要给大家介绍了关于js实现中文转拼音的相关资料,主要利用了pinyin-pro包,可以完美的实现所需要的功能,需要的朋友可以参考下
    2021-06-06
  • JavaScript获取网页中第一个链接ID的方法

    JavaScript获取网页中第一个链接ID的方法

    这篇文章主要介绍了JavaScript获取网页中第一个链接ID的方法,涉及javascript中document.links方法的使用,需要的朋友可以参考下
    2015-04-04

最新评论