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

问题描述

我在创建的表单中遇到了一些问题.这种形式:

 
<label ng-hide="hide" class="item item-input" ><span class="input-label">多少分钟?</span><input ng-pattern="onlyNumbers" name="number" type="text" ng-model="taskMinutes"></表单>

几乎在屏幕中间，但是当用户点击输入字段开始输入时，焦点没有被正确执行.键盘显示但它隐藏了该字段.如果我开始打字，焦点会被执行并且屏幕会相应地移动.有关如何解决此问题的任何提示?

更新:这是整个屏幕:

<离子含量><div class="list"><label class="item item-input"><span class="input-label">Task</span><input type="text" ng-model="taskInfo"><label class="item">这个任务可以衡量吗?<p><ion-checkbox ng-repeat="devList 中的项目"ng-model="item.checked"ng-checked="item.checked"ng-click="change(item)">{{ item.text }}</ion-checkbox></p><表单名称="myForm"><label ng-hide="hide" class="item item-input" ><span class="input-label">多少分钟?</span><input ng-pattern="onlyNumbers" name="number" type="tel" ng-model="taskMinutes"></表单><label class="item" ng-controller="tasksCtrl"><button ng-disabled="!myForm.number.$valid" class="button button-block button-royal" type="submit" ng-click="addTask()">添加任务</button>

解决方案

我是这样解决的:

注意:你必须安装cordova键盘插件(https://github.com/driftyco/离子插件键盘)

 var windowHeight = window.innerHeight;$scope.$on('$ionicView.loaded', function() {//回退+警告var scrollView = {scrollTo: function() { console.log('无法解析滚动委托句柄');}};var setupKeyboardEvents = function() {$scope.unbindShowKeyboardHandler = $scope.$on('KeyboardWillShowNotification',功能(信息){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');顶部 += 温度；temp = angular.element(temp.prop('offsetParent'));}top = top - scrollView.getScrollPosition().top;var inputHeight = input.prop('offsetHeight');var keyboardHeight = info.keyboardHeight;var requiredSroll = windowHeight - keyboardHeight >顶部 + 输入高度 + 11 ?0 : 窗口高度 - 键盘高度 - 顶部 - 输入高度 - 12；$timeout(function(){ scrollView.scrollTo(0, - requiredSroll || 0, true); });});$scope.unbindHideKeyboardHandler = $scope.$on('KeyboardWillHideNotification', function() {$timeout(function(){ scrollView.scrollTo(0, 0, true); });});};$超时(功能(){var 实例 = $ionicScrollDelegate.$getByHandle('your-scroll-handle')._instances;实例长度&&(scrollView = 实例[instances.length - 1]);}).then(setupKeyboardEvents);});$scope.$on('$destroy', function(){$scope.unbindShowKeyboardHandler();$scope.unbindHideKeyboardHandler();});

并在应用程序运行时:

 window.addEventListener('native.keyboardshow', keyboardShowHandler);window.addEventListener('native.keyboardhide', keyboardHideHandler);功能键盘ShowHandler(信息){//alert('键盘高度为:' + e.keyboardHeight);console.log("KeyboardWillShowNotification:" + JSON.stringify(info));$rootScope.$broadcast('KeyboardWillShowNotification', info);}功能键盘隐藏处理程序(信息){$rootScope.$broadcast('KeyboardWillHideNotification', info);}

并在模板中:

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>

解决方案

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

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