Ionic Framework Keyboard hides input field

Question

I am having some issues in a form I am creating. This form:

  <form name="myForm"> 
       <label ng-hide="hide" class="item item-input" >
          <span class="input-label">How much minutes?</span>
          <input ng-pattern="onlyNumbers" name="number" type="text" ng-model="taskMinutes">
       </label>
 </form>

Is almost in the middle of the screen but when the user taps on the input field to start typing, the focus is not being correctly executed. The keyboard shows but it is hiding the field. If I start typing, the focus gets executed and the screen moves accordingly. Any tips on how I can fix this?

Update: This is the whole screen:

<ion-view>
 <ion-content>
  <div class="list">
    <label class="item item-input">
      <span class="input-label">Task</span>
      <input type="text" ng-model="taskInfo"> 
    </label>
    <label class="item "> Can this task be measured?

      <p>        
      <ion-checkbox ng-repeat="item in devList"
                  ng-model="item.checked" 
                  ng-checked="item.checked"
                  ng-click="change(item)">
                  {{ item.text }}
      </ion-checkbox>
    </p>
      </label>

      <form name="myForm"> 
       <label ng-hide="hide" class="item item-input" >
      <span class="input-label">How much minutes?</span>
      <input ng-pattern="onlyNumbers" name="number" type="tel" ng-model="taskMinutes">
    </label>
    </form>


    <label class="item" ng-controller="tasksCtrl">
      <button ng-disabled="!myForm.number.$valid" class="button button-block button-royal" type="submit"  ng-click="addTask()">Add Task</button>
    </label>
  </div>

Answer 1

I was having this exact issue yesterday!

Each of the elements on the page had lots of different padding declarations that were conflicting and this broke my form.

Please try removing all styling from the page to see if this fixes it. If it does, add back the styling element-by-element to pinpoint which one is breaking your form.

Hope this helps!

Answer 2

The way that I found was to add the class hide-on-keyboard-open of ionic in all components that doesn't uses the keyboard. So this way I do not need to scroll the page cause with this components hidden I can see all I need to do with the keyboard open.

Answer 3

Without Using Any Plugin

This worked for me and currently using in more than 10 apps

NOTE : Please specify reason in comment For Vote Down

Just Add style="height: 400px;" in ion-content Its height Of keyboard

  <ion-view view-title="My Page">
    <ion-content>

      Hello!

      <div style="height: 400px;"></div>

    </ion-content>
  </ion-view>

Logic explanation : In Phone or Tablet

<ion-view> Is not Scrollable

But

<ion-content> Is Scrollable

So when you scroll its <ion-content> that scrolls and <ion-view> is DEAD , STIFF Never scrolls

Answer 4

This is how I solved it:

NOTE: you have to install cordova keyboard plugin (https://github.com/driftyco/ionic-plugin-keyboard)

        var windowHeight = window.innerHeight;

        $scope.$on('$ionicView.loaded', function() {

            // fallback + warning
            var scrollView = {scrollTo: function() { console.log('Could not resolve scroll delegate handle'); }};

            var setupKeyboardEvents = function() {

                $scope.unbindShowKeyboardHandler = $scope.$on('KeyboardWillShowNotification',
                function(info) {

                    var input = angular.element(document.activeElement);
                    var body = angular.element(document.body);
                    var top = input.prop('offsetTop') //+ angular.element(input.prop('offsetParent')).prop('offsetTop');
                    var temp = angular.element(input.prop('offsetParent'));
                    var tempY = 0;

                    while (temp && typeof(temp.prop('offsetTop')) !== 'undefined') {

                        tempY = temp.prop('offsetTop');
                        top += tempY;
                        temp = angular.element(temp.prop('offsetParent'));

                    }

                        top = top - scrollView.getScrollPosition().top;

                        var inputHeight = input.prop('offsetHeight');
                        var keyboardHeight = info.keyboardHeight;

                        var requiredSroll = windowHeight - keyboardHeight > top + inputHeight + 11 ? 0 : windowHeight - keyboardHeight - top - inputHeight - 12;

                        $timeout(function(){ scrollView.scrollTo(0, - requiredSroll || 0, true); });


                });

                $scope.unbindHideKeyboardHandler = $scope.$on('KeyboardWillHideNotification', function() {
                    $timeout(function(){ scrollView.scrollTo(0, 0, true); });
                });

            };

            $timeout(function(){
                var instances = $ionicScrollDelegate.$getByHandle('your-scroll-handle')._instances;
                instances.length && (scrollView = instances[instances.length - 1]);
            }).then(setupKeyboardEvents);

        });

        $scope.$on('$destroy', function(){
            $scope.unbindShowKeyboardHandler();
            $scope.unbindHideKeyboardHandler();
        });

and on application run:

                   window.addEventListener('native.keyboardshow', keyboardShowHandler);
                   window.addEventListener('native.keyboardhide', keyboardHideHandler);

                   function keyboardShowHandler(info){
                       //alert('Keyboard height is: ' + e.keyboardHeight);
                       console.log("KeyboardWillShowNotification: " + JSON.stringify(info));
                       $rootScope.$broadcast('KeyboardWillShowNotification', info);
                   }

                   function keyboardHideHandler(info){
                       $rootScope.$broadcast('KeyboardWillHideNotification', info);
                   }

and in the template:

<ion-content scroll-handle="your-scroll-handle">

Answer 5

Solved for ionic V1. Just add the fixed as below.

Add "delegate-handle" in the template file.

    <ion-content class="padding" overflow-scroll="false" delegate-handle="myInput">

then add function on input field for animate when keyboard open.

    <input type="text" id="user" ng-model="user" ng-focus="scrollUP(); keyboardFocus('dnsInput');">

Add the injectable dependency inside the controller

    angular.module('starter.user', []).controller('userCtrl', function($scope, $state, $http, $ionicScrollDelegate) {
         ....
         $scope.scrollUP = function () {
             if ( app.isAndroid() ) {
                document.querySelector("#user").scrollIntoView(false);
             }
         }
         $scope.keyboardFocus=function(handleValue){
             if ( app.isAndroid() ) { //check for android platform
                $timeout(function(){
                    $ionicScrollDelegate.$getByHandle(handleValue).scrollBottom();
               }, 500);
             }
          }
    });

Make sure to include the ionic keyboard latest version. currently, I used "com.ionic.keyboard": "2.2.1",

For native scrolling, Add the code in app.js

    .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
        $ionicConfigProvider.platform.android.scrolling.jsScrolling(true);
    .....
    }

Enjoy..