TextBoxes不会成为焦点

Question

我有一个非常奇怪的问题,发生在Ripple Emulator中,文本框不会聚焦...或者至少它似乎没有聚焦(一旦我点击它就没有光标闪烁).但是,如果我开始输入,然后单击文本框,文本框的内容会突然更新以反映我输入的内容.

这似乎与css,AngularJS和Ionic Framework相结合.

我有以下HTML(这在plunkr中不可重现)

<ion-view>
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content class="has-header">
        <div style="margin-top: 20px;">
            <label class="item item-input">
                <span class="input-label">Date</span>
                <input type="date" ng-change="search()" ng-model="filter.date">
            </label>

            <label class="item item-input">
                <span class="input-label">Only Unscheduled</span>
                <ion-checkbox ng-change="search()" style="border: none"
                              ng-model="filter.onlyUnscheduled"></ion-checkbox>
            </label>

            <label class="item item-input">
                <button class="button button-positive" ng-click="clearMatches()">Clear Matches</button>
            </label>
            <label class="item item-input">
                <button class="button button-positive" ng-click="makeTestUsersPlay()">Make Test Users Play</button>
            </label>
            <label class="item item-input">
                <button class="button button-positive" ng-click="makeTestDate()">Make Test Date</button>
            </label>

        </div>

        <ion-list>
            <ion-item ng-repeat="item in dates track by $index" style="padding: 0; padding-top: 10px;">
                <form novalidate="novalidate" on-valid-submit="save(item)">
                    <div>
                        <div class="item item-divider" style="text-align: center; margin-bottom: 20px">
                            {{item.description}}{{item.isCancelled ? ' (Cancelled)' : ''}}
                        </div>
                        <label class="item item-input">
                            <span class="input-label">Location</span>
                            <input type="text" ng-model="item.location" name="location">
                        </label>
                        <label class="item item-input">
                            <span class="input-label">Time</span>
                            <input type="time" ng-model="item.time" name="time">
                        </label>

                        <div class="padding">
                            <button type="submit" class="button button-energized">
                                Save
                            </button>
                            <div style="width: 75px; padding: 0" ng-click="charge(item, item.userId1)"
                                 ng-disabled="item.user1ChargeId"
                                 class="button button-energized">
                                Charge 1
                            </div>
                            <a style="width: 75px; padding: 0" ng-click="charge(item, item.userId2)"
                               ng-disabled="item.user2ChargeId"
                               class="button button-energized">
                                Charge 2
                            </a>
                        </div>
                    </div>
                </form>
            </ion-item>
        </ion-list>

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

如果我从所有按钮中删除按钮和按钮正面类,它会突然按预期工作.

更新:

这是ionic.css的源代码,可以找到所有样式

http://code.ionicframework.com/nightly/css/ionic.css

如果我将按钮类更改为:

.button{
    min-height: inherit;
    min-width: inherit;
    padding: inherit;
    line-height: inherit;
}

问题消失了.这向我建议一个浏览器渲染错误,该错误与试图溢出界限或某事的按钮有关.

Answer 1

autofocus您可以在 html 文件中使用 HTML5属性：

First name: <input type="text" name="fname" autofocus>

现在，页面加载后焦点将设置在该输入元素上。