Question

我有一个离子应用程序，当模态启动时，它假设要聚焦第一个输入。这是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离子应用程序。

Answer 1

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

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

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

Bydefault KeyboardDisplayRequiresUserAction设置为 true 。

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

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

您只需使用

即可

$scope.modal.show()

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

离子模态firstFocus无效

1 个答案: