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实现网页字符定位的方法
Jul 14 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
原生js实现随机点名
Jul 05 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
JS实现吸顶特效
2020/01/08 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
上班玩手机检讨书
2014/02/17 职场文书
新春文艺演出主持词
2014/03/27 职场文书
学前班评语大全
2014/05/04 职场文书
环保倡议书400字
2014/05/15 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
写给导师的自荐信
2015/03/06 职场文书
入党介绍人考察意见
2015/06/01 职场文书
毕业实习单位意见
2015/06/04 职场文书
大学开学感言
2015/08/01 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
课改心得体会范文
2016/01/25 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
Mysql如何查看是否使用到索引
2022/12/24 MySQL