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


Posted in Javascript onDecember 23, 2016

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时键盘自动弹出

点击输入框后的界面:

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

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

Javascript 相关文章推荐
JavaScript解析URL参数示例代码
Aug 12 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
JS敏感词过滤代码
Dec 23 #Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 #Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 #Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 #Javascript
Bootstrap和Java分页实例第一篇
Dec 23 #Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 #Javascript
Bootstrap select多选下拉框实现代码
Dec 23 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
php 函数中使用static的说明
2012/06/01 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
javascript self对象使用详解
2016/10/18 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python 多进程原理及实现
2020/12/21 Python
国家励志奖学金获奖感言
2014/01/09 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
初中校园广播稿
2014/02/02 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
建议书格式
2015/02/04 职场文书
任长霞观后感
2015/06/16 职场文书
初中生活随笔
2015/08/15 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
JavaScript流程控制(循环)
2021/12/06 Javascript