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

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

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

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

Answer 2

老问题但值得回答。你检查过css颜色属性了吗？它可能被设置为白色，使其不可见。

TextBoxes不会成为焦点

2 个答案: