Question

我在一个页面中有一个很长的输入列表。当我通过KeyboardAccessoryBar将焦点移动到下一个输入时，有时候导航栏会使聚焦输入变得模糊。

我已在IONIC论坛上发布此问题，但尚未找到解决方案。

http://forum.ionicframework.com/t/ionic-input-is-obscured-by-navigation-bar/35466

重复步骤：

创建一个长输入列表：

点击KeyboardAccessoryBar上的下一步按钮，将焦点移至下一个输入。

到目前为止一切正常，输入NO。是4。

好的，让我们继续吧。再次单击下一步，然后尝试将焦点移至第5个输入。问题发生时，第5个输入被导航栏遮挡。

我的发现：

此问题很容易在IOS 9上重现。（在ios 7.1.2上重现起来并不容易）
如果我从项目中删除离子键盘插件，则无法重现该问题。

测试代码：

HTML：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-nav-bar class="bar-positive">
        </ion-nav-bar>
            <ion-view>
                <ion-pane>
                    <ion-content class="has-header">
                        <form>
                            <label class="item item-input">
                                <span class="input-label">1</span>
                                <input type="text" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">2</span>
                                <input type="number" placeholder="test"  >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">3</span>
                                <input type="text" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">4</span>
                                <input type="number" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">5</span>
                                <input type="number" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">6</span>
                                <input type="text" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">7</span>
                                <input type="text" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">8</span>
                                <input type="text" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">9</span>
                                <input type="text" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">10</span>
                                <input type="text" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">11</span>
                                <input type="text" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">12</span>
                                <input type="text" placeholder="test">
                            </label>
                        </form>
                    </ion-content>
                </ion-pane>
            </ion-view>
    </body>
</html>

JS：

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.disableScroll(true)
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

任何上帝都可以帮助我吗？非常感谢!!!!

Answer 1

尝试使用此代码，它对我有用删除<ion-view></ion-view>, <ion-pane></ion-pane>代码

<body ng-app="starter">
        <ion-nav-bar class="bar-positive">
        </ion-nav-bar>
                    <ion-content class="has-header">
                        <form>
                            <label class="item item-input">
                                <span class="input-label">1</span>
                                <input type="text" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">2</span>
                                <input type="number" placeholder="test"  >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">3</span>
                                <input type="text" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">4</span>
                                <input type="number" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">5</span>
                                <input type="number" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">6</span>
                                <input type="text" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">7</span>
                                <input type="text" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">8</span>
                                <input type="text" placeholder="test" >
                            </label>
                            <label class="item item-input">
                                <span class="input-label">9</span>
                                <input type="text" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">10</span>
                                <input type="text" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">11</span>
                                <input type="text" placeholder="test">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">12</span>
                                <input type="text" placeholder="test">
                            </label>
                        </form>
                    </ion-content>

    </body>

离子输入被导航栏遮挡

1 个答案: