Question

我正在使用Magnific Popup插件，我想使我的主要操作按钮（保存）在弹出窗口打开时集中显示，这样，如果用户单击Enter键，则只会触发单击事件。

我在运气不佳的情况下尝试在控制台上执行以下操作：

$('.popup-modal-save').focus();

是否有一种不使用按键事件监听器的方法？

这是我的JSFiddle的链接：https://jsfiddle.net/dwjfq1gp/25/

Answer 1

您可以使用magnific-popup的焦点选项。

$.magnificPopup.open({
    items : {
    type : 'inline',
    src : '#idOfInlinePopUP'
    },
    focus: '#closeButton',                                                                   
    closeOnBgClick:false,                                                                        
    enableEscapeKey:false
    }, 0);

按钮代码：

<input type="button" value="close" onclick="$.magnificPopup.close();" id="closeButton">

在此代码中，焦点选项由要打开的按钮的ID组成。并且src必须包含嵌入式弹出窗口的ID。

如果您能够成功打开弹出窗口，则只需添加具有要单击的按钮的ID的focus属性，然后单击enter click即可。

在此答案中，打开弹出窗口时，默认焦点将位于closeButton上。单击此按钮后，弹出窗口将关闭。

Answer 2

打开弹出窗口时，应使用事件将重点放在“保存”按钮上。 a BSON implementation

$('.popup-modal').magnificPopup({
   ...
    callbacks: {
        open: function() {
                $('.popup-modal-save').focus();
        },
    }
});

Answer 3

您实际上需要为此监听按键事件。当模态打开时，您需要附加焦点事件。这是一个工作的小提琴https://jsfiddle.net/2fb3d841/1/

// I've just added this
callbacks: {
    open: function() {
            $('.popup-modal-save').focus();
            $(document).keypress(function(e){
              if (e.which == 13){
                  $(".popup-modal-save").click();
                  $.magnificPopup.close();
              }
            });
    },
}

打开宏伟的弹出焦点按钮

3 个答案: