离子模态 firstFocus 不工作

Question

我有一个 Ionic 应用程序，当模式启动时，它假设聚焦第一个输入。这是 ID 为 #discount.

的输入元素

这是我的看法。

<script id="discount.html" type="text/ng-template">
<ion-modal-view>
    <ion-header-bar>
        <h1 class="title">Add Discount</h1>
    </ion-header-bar>
    <ion-content>
        <div class="list list-inset">
            <label class="item item-input item-stacked-label">
                <span class="input-label">Price</span>
                <input type="tel" autofocus class="button-large button-block text-center input-lg" id="discount" ng-model="payment.discountPrice"  ui-money-mask="2" />
            </label>
            <br>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Name</span>
                <input type="text" class="button-large button-block input-lg" ng-model="payment.discountName" />
            </label>
            <br>
            <button class="button button-large button-block button-positive" ng-click="submitDiscount()">Apply</button>
            <button class="button button-large button-block button-assertive" ng-click="closeModal()">Cancel</button>
        </div>
    </ion-content>
</ion-modal-view>

这是我的控制器。

    $scope.openDiscountModal = function () {

  //cache the modal
  $ionicModal.fromTemplateUrl('discount.html', {
    scope: $scope,
    animation: 'slide-in-up',
    focusFirstInput: true,
    backdropClickToClose: false
  }).then(function (modal) {
    $scope.modal = modal;
    $scope.modal.show().then(document.getElementById('discount').focus());
    console.log('xxx');
  });

};

这在桌面浏览器中运行良好，但它并不专注于我的 IOS ionic 应用程序。

Answer 1

对于iOS，您需要在config.xml文件中添加以下配置。

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

请参阅这篇 iOS Configuration 文章中的 KeyboardDisplayRequiresUserAction 部分。

默认情况下 KeyboardDisplayRequiresUserAction 设置为 true.

添加配置首选项后，您的代码将不再需要此代码来聚焦您的第一个字段

then(document.getElementById('discount').focus()

您可以简单地使用

$scope.modal.show()

因为 focusFirstInput: true 将自动聚焦第一个字段，在您的情况下 discount 输入字段。

离子模态 firstFocus 不工作

Ionic modal firstFocus not working

javascript

angularjs

ionic