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闭包的理解和实例
Aug 12 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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 新手入门教程
2009/08/03 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php文件缓存类汇总
2014/11/21 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
浅析PHP开发规范
2018/02/05 PHP
laravel 数据验证规则详解
2019/10/23 PHP
input的focus方法使用
2010/03/13 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
几个判断型的面试题
2012/07/03 面试题
给老婆的搞笑检讨书
2014/01/12 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
python not运算符的实例用法
2021/06/30 Python
vue使用echarts实现折线图
2022/03/21 Vue.js