我有一个 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>
这是我的 Controller 。
$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 应用程序。
最佳答案
对于 iOS,您需要在 config.xml 文件中添加以下配置。
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
请参阅此 iOS Configuration 中的 KeyboardDisplayRequiresUserAction 部分文章。
默认情况下 KeyboardDisplayRequiresUserAction 设置为 true。
添加配置首选项后,您的代码将不再需要此代码来聚焦您的第一个字段
then(document.getElementById('discount').focus()
你可以简单地使用
$scope.modal.show()
因为 focusFirstInput: true
会自动聚焦第一个字段,在您的例子中是 discount 输入字段。
关于javascript - ionic 模态 firstFocus 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34006758/