离子框架键盘隐藏输入字段答案

【问题标题】：Ionic Framework Keyboard hides input field离子框架键盘隐藏输入字段
【发布时间】：2015-09-03 02:22:32
【问题描述】：

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

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

【问题讨论】：

你在使用原生滚动$ionicConfigProvider.scrolling.jsScrolling(false); 吗？
老实说，我从未见过。我该如何使用它，我应该把它放在哪里？谢谢
实际上，您目前不应该使用它，因为该功能会导致您面临的问题。有一个问题悬而未决，他们是 working。
我明白了，这太糟糕了。好的，非常感谢！
这是您唯一展示的内容，还是在此之上展示的内容？

标签： angularjs forms focus ionic-framework ionic

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

在模板文件中添加“delegate-handle”。

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

确保包含最新版本的离子键盘。目前，我使用了 "com.ionic.keyboard": "2.2.1",

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

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

享受..

【讨论】：

【解决方案3】：

不使用任何插件

这对我有用，目前在 10 多个应用中使用

注意：请在评论中说明投票否决的原因

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

  <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 永远不会滚动

【讨论】：

注意：在任何人投反对票之前，请在评论中说明原因
看来您还没有理解这个问题。 They keyboard hides the input.
@AshikBasheer.. 是的，如果您将键盘的高度设置为 400px，那么该 div 中的任何内容都将显示在键盘上方，即使输入位于 **BOTTOM.Reply 如果你力求得到 AshikBasheer **
这是一个实用的解决方案；如果您无法实施，请告诉我，我将为您创建 DEMO
如果以后的 iOS 更新中键盘高度发生变化怎么办？

【解决方案4】：

我就是这样解决的：

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

【讨论】：

【解决方案5】：

我昨天遇到了这个问题！

页面上的每个元素都有很多不同的填充声明，这些声明相互冲突，这破坏了我的表单。

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

希望这会有所帮助！

【讨论】：