android - 失去对文本项目输入的关注后， ionic 项目选择在 android 上闪烁

Question

通过 ionic serve 运行正常。

在设备上运行时，在页面加载之后以及在您键入或仅选择文本框之后。然后，当您选择“选择(下拉)”时，下拉选项会闪烁，然后它不接受任何输入(只是关闭而不选择)，但是如果您再次尝试它会起作用。

据我所知，这是由于 ng-untouched 被替换为 ng-touched

<ion-list>
    <ion-item class="item-divider">
        <b class="">New member's details</b>
    </ion-item>
    <ion-item class="item-input">
        <label class="input-label" for="firstName">First name</label>
        <input type="text" ng-model="memberDetails.firstName" name="firstName" id="firstName" ng-class="{'input-validation-error' : applicationForm.firstName.$error.required && (applicationForm.firstName.$touched || showRequired)}" required />
    </ion-item>
    <ion-item class="item-input">
        <label class="input-label" for="surname">Surname</label>
        <input type="text" ng-model="memberDetails.surname" name="surname" id="surname" ng-class="{'input-validation-error' : applicationForm.surname.$error.required && (applicationForm.surname.$touched || showRequired)}" required />
    </ion-item>
    <ion-item class="item-input">
        <label class="input-label" for="initials">Initials</label>
        <input type="text" ng-model="memberDetails.initials" name="initials" id="initials" ng-class="{'input-validation-error' : applicationForm.initials.$error.required && (applicationForm.initials.$touched || showRequired)}" required />
    </ion-item>
    <ion-item class="item-input item-select">
        <label class="input-label" for="title">Title</label>
        <select ng-model="memberDetails.titleId" ng-options="lookup.id as lookup.description for lookup in titleLookup" name="title" id="title" ng-class="{'input-validation-error' : applicationForm.title.$error.required && (applicationForm.title.$touched || showRequired)}" required></select>
    </ion-item>
</ion-list>

是否有解决或修复此问题的方法？

编辑

问题似乎与 android 上的 angularjs 有关，问题似乎出现在 android chrome 浏览器的 angularjs 站点上。

Answer 1

我找到了一个解决方法，基于 this stackoverflow post

只需将此指令添加到您的应用中:

.directive('input', function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attr, modelCtrl) {
            if (attr.type === "text" && attr.name && modelCtrl) {
                element.on('focus', function () {
                    modelCtrl.$setTouched();
                    scope.$apply();
                });
            }
        }
    };
});

注意:问题不会出现在所有设备上，只是出现在某些设备上，(尚未找到问题的根源)