Question

为了提供辅助功能，我需要在我的Cordova应用程序中输入屏幕时关注元素。通过一些技巧，我设法将焦点放在元素上，但元素瞬间失去焦点（通过聆听＆＃34;模糊＆＃34;事件验证）并且在Apples VoiceOver，Androids Talkback开始之前发生了损失或者用户可以采取任何行动。

我已经尝试将焦点的设置包装在$ timeout内，以强制它在所有渲染后发生，但这根本没有帮助。在我看来，科尔多瓦的某些东西，角1或离子在它自己干扰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属性

希望它会对你有所帮助。

cordova / angular / ionic stack中的某些东西窃取了我的焦点

1 个答案: