科尔多瓦/角度/离子堆栈中的某些东西抢走了我的注意力

Question

为了提供可访问性，我需要在我的 Cordova 应用程序中进入屏幕时聚焦元素。通过一些技巧，我设法将焦点设置在一个元素上，但该元素会立即失去焦点（通过侦听“模糊”事件来验证）并且丢失发生在 Apples VoiceOver、Androids Talkback 启动或用户可以接受之前任何动作。

我已经尝试将焦点设置包装在 $timeout 中，以强制它在所有内容都呈现后发生，但这根本没有帮助。在我看来，Cordova、angular 1 或 ionic 中的某些东西会在其自身干扰 m 代码时产生一些令人讨厌的焦点魔法。

有没有人经历过类似的事情并找到了解决方法？

Answer 1

我对 Cordova-Ionic 使用了以下指令：

app.directive('focusableInput', function($timeout,$log) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            focusState: "=",
            onGo: "&"
        },
        link: function(scope, element, attr, ngModel) {

            var moveCursorToEnd = function(el) {
                if (typeof el.selectionStart == "number") {
                    el.selectionStart = el.selectionEnd = el.value.length;
                } else if (typeof el.createTextRange != "undefined") {
                    el.focus();
//                    var range = el.createTextRange();
//                    range.collapse(false);
//                    range.select();
                }
            }

            scope.$watch("focusState", function(state) {
                $log.debug("focusableInput - focus state change: " + state,element);
                if (state) {
                    //cordova.plugins.Keyboard.show();
                    $log.debug("focusableInput - do focus!!!",element);
                    $timeout(function() {
                        element[0].focus();
                        moveCursorToEnd(element[0]);
                    }, 300);

                    //element[0].focus();
                } else {
                    element[0].blur();
                }
            });

            element.on("keydown", function(event) {
                console.log("pressed: " + event.which, event);
                //$log.debug(attr);

                if (event.which == 13) {
                    $timeout(function() {
                        scope.onGo();
                    });
                }
            });



            scope.$watch(
                    function() {
                        return ngModel.$modelValue;
                    },
                    function(newValue) {
                        $log.debug("focus input model changed: ", newValue);

                        if (newValue) {
                            var endChar = newValue[newValue.length - 1];
                            $log.debug("endChar",endChar);

                            if (endChar == " " || endChar == ",") {
                                $timeout(function() {
                                    scope.addItem();
                                });
                            }
                        }
                    }
            );
        }
    };
});

及用法：

<input type="email" placeholder="Email" 
               class="login-custom-input"
               focusable-input 
               focus-state="textAreaFocusState"
               ng-model="meeterAccount.email"
               ng-focus="onSignUpLoginEmailFocus()"
               ng-blur="onSignUpLoginEmailFocusLost()"
               >

focusable-input 指令使用focus-state 属性

---

希望对你有帮助。