ionic开发中点击input时键盘自动弹出

 更新时间:2016年12月23日 14:13:36   作者:Elain红红  
ionic开发移动端界面时,在输入用户名和密码的时候,输入法不要挡住我的输入框,并且输入框往上滚动的时候,顶部标题不要上移,下面给大家分享实现代码,一起看看吧

ionic开发移动端界面时,在输入用户名和密码的时候,我希望输入法不要挡住我的输入框,并且输入框往上滚动的时候,顶部标题不要上移,只是input内容部分往上移动,点击密码输入框时我还想看见按钮,这样不用关闭输入法,也可以直接点击登录按钮,关闭输入法自动恢复成默认的界面,用户体验不错哦~;找了很多代码,以下代码是我想要的效果:

.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) 
        }) 
      } 
    } 
  } 
}])

效果图:

点击输入框前的界面:

点击输入框后的界面:

以上所述是小编给大家介绍的ionic开发中点击input时键盘自动弹出,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 基于element-ui 动态换肤的代码详解

    基于element-ui 动态换肤的代码详解

    这篇文章主要介绍了element-ui 动态换肤,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • 通过实例了解JS 连续赋值

    通过实例了解JS 连续赋值

    这篇文章主要介绍了通过实例了解JS 连续赋值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS面试之对事件循环的理解

    JS面试之对事件循环的理解

    这篇文章主要为大家介绍了JS面试之对事件循环的理解分析详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • js判断对象是否是某一类型

    js判断对象是否是某一类型

    下面的代码就是判断脚本之家是不是字符串类型的代码
    2008-11-11
  • 不用typsescript如何使用类型增强功能

    不用typsescript如何使用类型增强功能

    这篇文章主要给大家介绍了关于不用typsescript如何使用类型增强功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 两个数组去重的JS代码

    两个数组去重的JS代码

    这篇文章主要介绍了两个数组去重的JS代码,有需要的朋友可以参考一下
    2013-12-12
  • ES6中解构赋值实现变量批量赋值解放双手

    ES6中解构赋值实现变量批量赋值解放双手

    这篇文章主要为大家介绍了ES6中解构赋值实现变量批量赋值解放双手,变量的解构赋值,听起来很复杂,简单点说可以理解成批量操作变量赋值
    2022-04-04
  • js与applet相互调用的方法

    js与applet相互调用的方法

    这篇文章主要介绍了js与applet相互调用的方法,结合实例形式分析了js调用java的applet以及java调用js的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript事件

    JavaScript事件 "事件对象"的注意要点

    这篇文章主要介绍了JavaScript事件,告诉大家"事件对象"的注意要点,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信小程序常见页面跳转操作简单示例

    微信小程序常见页面跳转操作简单示例

    这篇文章主要介绍了微信小程序常见页面跳转操作,结合简单实例形式总结分析了微信小程序保留页面跳转、关闭页面跳转、返回上一级页面等各种常见的跳转操作实现技巧,需要的朋友可以参考下
    2019-05-05

最新评论