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时键盘自动弹出,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js event事件的传递与冒泡处理

    js event事件的传递与冒泡处理

    与Netscape相反,IE中的事件传递方向是从事情发生的对象开始,然后依次由该对象向所在的父节点传递。
    2009-12-12
  • javascript给span标签赋值的方法

    javascript给span标签赋值的方法

    本篇文章通过两种方法给大家介绍js给span标签赋值的方法,两种方法都比较不错,特此分享给大家,供大家学习
    2015-11-11
  • 如何使用pdf.js展示pdf文件(亲测可用)

    如何使用pdf.js展示pdf文件(亲测可用)

    这篇文章主要介绍了如何使用pdf.js展示pdf文件(亲测可用),如果只是电脑端,可通过 iframe 标签嵌套预览,文中介绍了安装电脑ios的通用方法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 原生JS查找元素的方法(推荐)

    原生JS查找元素的方法(推荐)

    下面小编就为大家带来一篇原生JS查找元素的方法(推荐)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-11-11
  • javascript 星级评分效果(手写)

    javascript 星级评分效果(手写)

    今天上午抽空随手写了个星级评分的效果,给大家分享下。由于水平有限,如有问题请指出;首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态,需要的朋友可以参考下
    2012-12-12
  • JavaScript中的继承之类继承

    JavaScript中的继承之类继承

    在JS中继承是一个非常复杂的话题,比其他任何面向对象语言中的继承都复杂得多。接下来通过本文给大家介绍JavaScript中的继承之类继承,感兴趣的朋友一起看看吧
    2016-05-05
  • Javascript中document.referrer隐藏来源的方法

    Javascript中document.referrer隐藏来源的方法

    这篇文章主要介绍了Javascript中document.referrer隐藏来源的方法,文中通过一个实例给大家介绍了实现的方法,有需要的朋友可以参考借鉴,下面来一起学习学习吧。
    2017-01-01
  • js中常用的Tab切换效果(推荐)

    js中常用的Tab切换效果(推荐)

    下面小编就为大家带来一篇js中常用的Tab切换效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-08-08
  • layui table 多行删除(id获取)的方法

    layui table 多行删除(id获取)的方法

    今天小编就为大家分享一篇layui table 多行删除(id获取)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript 文件加载与阻塞问题之性能优化案例详解

    JavaScript 文件加载与阻塞问题之性能优化案例详解

    这篇文章主要介绍了JavaScript 文件加载与阻塞问题之性能优化案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09

最新评论