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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
JS实现公告上线滚动效果
Jan 10 Javascript
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
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php实现的用户查询类实例
2015/06/18 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python的Django框架中的数据库配置指南
2015/07/17 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python实现名片管理器的示例代码
2019/12/17 Python
如何将json数据转换为python数据
2020/09/04 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
大学生职业生涯规划范文
2013/12/31 职场文书
车间主任岗位职责
2014/03/16 职场文书
小学生倡议书范文
2014/05/13 职场文书
社团活动总结报告
2014/06/27 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
图书借阅制度范本
2015/08/06 职场文书
5道关于python基础 while循环练习题
2021/11/27 Python