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

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

赞 (0)

相关推荐

  • ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

    在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io

  • 使用JS轻松实现ionic调用键盘搜索功能(超实用)

    这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了f

  • ionic cordova一次上传多张图片（类似input file提交表单)的实现方法

    我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传,按cordova官方的方法,每次选择完后就直接上传,这并不符合用户的习惯,最好的用户习惯是用户选择完需要的图片,并可在本地预览,接着用户再次打开摄像头或图库再次选择图片,接着预览,对于不需要的图片删除,最后确定可以后,再一次性上传所有图片.显然这种方式,cordova是不支持,那要如何实现呢,以下是我的方法: 通过调用$cordovaImagePicker.getPictures该方法打开图库,获得图片的URL地址,ps:相

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

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

    ionic开发移动端界面时,在输入用户名和密码的时候,我希望输入法不要挡住我的输入框,并且输入框往上滚动的时候,顶部标题不要上移,只是input内容部分往上移动,点击密码输入框时我还想看见按钮,这样不用关闭输入法,也可以直接点击登录按钮,关闭输入法自动恢复成默认的界面,用户体验不错哦~:找了很多代码,以下代码是我想要的效果: .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$ionicPositi

  • Android 仿今日头条评论时键盘自动弹出的效果(推荐)

    Android 仿今日头条评论时键盘自动弹出的效果(推荐)

    Android 仿今日头条评论时键盘自动弹出的效果:当点击评论时,弹出对话框,同时弹出软键盘,当点击返回键时,将对话框关闭,不只是关闭软键盘. 效果图: 对这个对话框设置一个style效果: <style name="inputDialog" parent="@android:style/Theme.Holo.Light.Dialog"> <item name="android:windowBackground">@col

  • jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

    jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

    在使用JqGrid时,Table中最后一列是操作列,在操作列中每一行都一个操作按钮,该操作按钮类似下拉菜单,如下图: 在点击Table中[操作]一列时需要弹出一个Div层,该Div层中包含一堆按钮,用于对Table行进行操作,如下: 解决步骤如下: 1.首先,在colModel中的列上添加属性edittype:'select'和方法formatter:groupGrid.formatOptions,如下图: 方便复制,代码如下: {label:'操作',name: 'operations',in

  • Android屏蔽软键盘自动弹出的解决方案

    Android屏蔽软键盘自动弹出的解决方案

    问题概述 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入框被系统键盘遮挡了,大大降低了用户操作体验,这就是开发中非常常见的软键盘遮挡的问题,该如何解决? 简单解决方案 方法一: 在你的activity中的oncreate中setContentView之前写上这个代码 getWindow().setSoftInputMode(WindowManager.L

  • Android键盘自动弹出解决方法分析

    本文实例分析了Android键盘自动弹出解决方法.分享给大家供大家参考,具体如下: 1.在: 复制代码 代码如下: activity android:name=".Uninstaller" android:label="@string/app_name" android:windowSoftInputMode="adjustPan" 加入了: 复制代码 代码如下: android:windowSoftInputMode="adjustP

  • Android 软键盘自动弹出与关闭实例详解

    Android 软键盘自动弹出与关闭实例详解

    Android 软键盘自动弹出与关闭 在我们写修改信息或者搜索,修改密码等界面的时候,用户进入这个界面的主要目的就是输入修改/查找 某些信息,为了用户体验应该自动弹出软键盘而不是让用户主动点击输入框才弹出. 1.软键盘的自动弹出 private void showKeyboard(){ InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE

  • Android之软键盘自动弹出和关闭【代码分享】

    一:软键盘自动弹出. private EditText top_middle;//输入框 //-------------------------------------弹出软键盘----------------------------------- top_middle.setFocusable(true); top_middle.setFocusableInTouchMode(true); top_middle.requestFocus(); InputMethodManager inputM

  • java使用EditText控件时不自动弹出输入法的方法

    带有EditText控件的在第一次显示的时候会自动获得focus,并弹出键盘, 如果不想自动弹出键盘,可以 复制代码 代码如下: 在mainfest文件中把对应的activity设置 android:windowSoftInputMode="stateHidden" 或者android:windowSoftInputMode="stateUnchanged". 以上就是本文的全部内容了,希望大家能够喜欢.

  • Android中点击隐藏软键盘最佳方法

    实现功能:点击EditText,软键盘出现并且不会隐藏,点击或者触摸EditText以外的其他任何区域,软键盘被隐藏: 1.重写dispatchTouchEvent()方法,获取当前触摸事件为DOWN的时候隐藏软键盘 @Override public boolean dispatchTouchEvent(MotionEvent ev) { //Finger touch screen event if (ev.getAction() == MotionEvent.ACTION_DOWN) { //

随机推荐