Question

我正在创建一种形式的问题。这个表格：

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

Answer 1

这就是我解决它的方法：

注意：您必须安装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, 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">

Answer 2

我昨天遇到了这个问题！

页面上的每个元素都有许多不同的填充声明，这些声明是冲突的，这打破了我的形式。

请尝试从页面中删除所有样式以查看是否可以解决此问题。如果是这样，请逐个添加样式元素，以确定哪一个正在破坏您的表单。

希望这有帮助！

Answer 3

我发现的方法是在所有不使用键盘的组件中添加离子类hide-on-keyboard-open。所以这种方式我不需要滚动页面因为隐藏了这个组件我可以看到键盘打开时我需要做的所有事情。

Answer 4

解决离子V1问题。只需添加固定如下。

添加＆＃34;委托 - 句柄＆＃34;在模板文件中。

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

然后在输入字段上添加函数，以便在键盘打开时进行动画处理。

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

在控制器内添加注射依赖

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

确保包含离子键盘最新版本。目前，我使用＆＃34; com.ionic.keyboard＆＃34;：＆＃34; 2.2.1＆＃34;，

对于原生滚动，请在app.js中添加代码

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

享受..

Answer 5

不使用任何插件

这对我有用，目前在超过10个应用程序中使用

注意：请在评论中注明原因

只需在style="height: 400px;"的高度中添加ion-content 键盘

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

      Hello!

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

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

逻辑说明：在手机或平板电脑中

<ion-view>不可滚动

但是

<ion-content>可滚动

因此，当您滚动<ion-content>滚动并且<ion-view>为DEAD时，STIFF从不滚动

Ionic Framework键盘隐藏输入字段

5 个答案:

注意：请在评论中注明原因