离子键盘框架隐藏输入字段 [英] Ionic Framework Keyboard hides input field

问题描述

我有在我创建一个表单的一些问题。这种形式：

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?

更新：这是整个屏幕：

<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>

推荐答案

这是我如何解决它：

请注意：您必须安装科尔多瓦键盘插件（ https://github.com/driftyco/离子-插件键盘）

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();
        });

和在应用程序运行：

                   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);
                   }

和在模板：

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

这篇关于离子键盘框架隐藏输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！