angularjs – Ionic Framework键盘隐藏输入字段

发布时间：2020-12-17 07:35:56 所属栏目：安全来源：网络整理

导读：我正在创建一种形式的问题.这种形式： 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

我正在创建一种形式的问题.这种形式：

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

几乎位于屏幕中间,但当用户点击输入字段开始输入时,焦点未正确执行.键盘显示但它隐藏了该字段.如果我开始输入,则会执行焦点并相应地移动屏幕.有关如何解决此问题的任何提示？

更新：这是整个屏幕：

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

这就是我解决它的方式：

注意：您必须安装cordova键盘插件(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,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">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!