Question

我正在创建一个带有表单和一些必填字段的Ionic应用程序。

提交表单时，如果表单无效，我会使用Ionic的$ ionicPopup服务显示警告消息。

我的问题是：用户可以按“ENTER”或（Android中的“Go”按钮）同时调用表单提交并关闭弹出窗口，这会导致另一个弹出窗口打开。

你可以在这里看到这种情况：

聚焦输入，按ENTER键，当显示错误信息时，再次按ENTER关闭它。另一个弹出窗口将打开（很可能是因为背景后面的输入仍然有焦点，或者可能是因为模式是在表单中创建的 - 让ENTER再次调用提交）。

有没有办法避免这种行为？也许$ ionicPopup中的ENTER关闭它而不再提交表单，或至少有一些代码在显示一个新的活动弹出窗口之前关闭它？因为当您打开多个弹出窗口时，如果您尝试使用鼠标（或点击）来关闭消息，系统会提示用户关闭所有其他对话框，然后再将其发送回主屏幕。

我知道我可以尝试获取弹出窗口的引用并调用close（）方法，但它对我来说并不适用。最后，在上一个警报完全关闭之前，新警报会打开，并且背景会永远停留在屏幕上。

感谢您的帮助。

Answer 1

事实证明，我的实际问题是$ ionicPopup不支持按ENTER（或＃34;在Android键盘上去＃34;）来关闭弹出窗口。出于某种原因，我试图将注意力从输入中剔除，但它没有用。

对于遇到相同问题的任何人，我最终创建了一个角度指令，以便在提交表单时关闭设备键盘。

这是指令代码：

(function () {
    'use strict';

    angular
        .module('myModule')
        .directive('closeKeyboardOnSubmit', closeKeyboardOnSubmit);

    closeKeyboardOnSubmit.$inject = ['$ionicPlatform', '$cordovaKeyboard'];

    function closeKeyboardOnSubmit($ionicPlatform, $cordovaKeyboard) {

        var directive = {
            require: '^form',
            restrict: 'A',
            link: link
        };

        return directive;

        function link (scope, element) {
            element.on("submit", function(){
                $ionicPlatform.ready(function(){
                    $cordovaKeyboard.close();
                }); 
            });
        }
    }

})();

然后我在像这样的表单标签上使用它：

<form close-keyboard-on-submit ...>

显然，直接在浏览器上测试时问题仍然存在，但在部署到设备时仍然有效。

如何在打开新的之前关闭$ ionicPopup？

1 个答案: