2

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

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

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

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

示例代码

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

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

我知道我可以尝试获取对弹出窗口的引用并调用 close() 方法，但它对我来说不太有效。最终，新警报在前一个警报完全关闭之前打开，并且背景永远卡在屏幕上。

感谢您的帮助。

4

1 回答 1

1

事实证明，我的实际问题是 $ionicPopup 不支持按 ENTER（或 Android 键盘上的“go”）关闭弹出窗口。出于某种原因，我试图将注意力从输入中移开，但没有奏效。

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

这是指令代码：

(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 ...>

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

于 2015-12-28T13:31:24.067 回答