Question

没有输入字段时，不会调用keydown

我无法捕获转义事件，对话框中没有输入字段。在下面的示例中，只有在有输入的情况下才能正常工作。当我删除输入时，没有达到keydown。我怎样才能抓住按esc或输入这种情况的事件？

＆＃13;

(function () {
    var dialog = $("#dialog-confirm2")
    .dialog({

        resizable: false,
        height: 150,
        modal: true,
        closeOnEscape: false, //hide x button
    })
    .on('keydown', function (evt) {
        if (evt.keyCode === $.ui.keyCode.ESCAPE) {
            alert('test');
            <%--more actions to do here--%>
                dialog.dialog('close');
        }
        evt.stopPropagation();
    });
}());

＆＃13;

<div id="dialog-confirm2">
  Dialog
  <input type="text" /> <%--this is the redundent input i dont need in the dialog--%>
</div>

＆＃13;

新评论2015-10_27

对于Palpatim reuestion我添加信息。我试图采用你给我的解决方案，但按下转义时不会调用以下行： $ find（＆＃34;＆lt;％= RadAjaxManager1.ClientID％＆gt;＆＃34;）。ajaxRequestWithTarget（＆＃39;＆lt;％= btnMessageNo.UniqueID％＆gt;＆＃39;，＆＃39;＆＃ 39）; 参见选项1，选项2和选项3.它们都没有工作。

您的解决方案的完整代码：

<asp:Button ID="btnMessageNo" runat="server" OnClick="btnMessageNo_Click" Text="Update" CssClass="butttonInProduction" Visible="false" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">

// Store a reference to the key event handler so we can use `off` later
var dialogKeyeventHandler;


// Returns an anonymous event handler, bound to the dialog instance
function makeDialogKeyeventHandler(dialog) {
    return function (evt) {
        if (evt.keyCode === 13) //ENTER
        {
            //$(':button:contains("yes")').click(); //click on yes button
            destroyDialog(dialog);
        }
        else if (evt.keyCode === $.ui.keyCode.ESCAPE)
        {
            //alert('inside escape');

            //option 1:
            $(':button:contains("no")').click(); //click on yes button

            //option 2:
            //destroyDialog(dialog);
            //$find("<%=RadAjaxManager1.ClientID %>").ajaxRequestWithTarget('<%= btnMessageNo.UniqueID %>', '');

            //option 3:
            //$find("<%=RadAjaxManager1.ClientID %>").ajaxRequestWithTarget('<%= btnMessageNo.UniqueID %>', '');
            //destroyDialog(dialog);
        }
        evt.stopPropagation();
    }
}

function ShowMessage(result) 
{
    if (result == '"confirm"')
    {
        initFocus();

        var message = "Are there any exceptions?";
        document.getElementById('<%=lblConfirmMsg.ClientID %>').innerHTML = message;

        $(function () {
            var dialog = $("#dialog-confirm").dialog({
                resizable: false,
                height: 150,
                modal: true,
                closeOnEscape: false, //hide x button
                open: function (event, ui) { $(".ui-dialog-titlebar-close", ui.dialog | ui).hide(); },//hide x button
                buttons:
                {
                    "yes": function ()
                    {
                        //there are exceptions, wait for additional user scan
                        //$(this).dialog("close");
                        destroyDialog(dialog);
                    },
                    "no": function ()
                    {
                        //$(this).dialog("close");
                        destroyDialog(dialog);
                        $find("<%=RadAjaxManager1.ClientID %>").ajaxRequestWithTarget('<%= btnMessageNo.UniqueID %>', '');
                    },
                    //Cancel: function ()
                    //{
                    //    $(this).dialog("close");
                    //}
                }
            });

            dialogKeyeventHandler = makeDialogKeyeventHandler(dialog);
            $(document).on('keydown', dialogKeyeventHandler);

        });

    }
    else if (result != '')
    {
        alert(result);
        initFocus();
    }
}

// Close the dialog and unbind the key event handler
function destroyDialog(dialog) {
    dialog.dialog('close');
    $(document).off('keydown', dialogKeyeventHandler);
    dialogKeyeventHandler = null;
}

  </script>
    </telerik:RadCodeBlock>

Answer 1

问题的根本原因是关键事件不会像普通事件那样在容器树中传播。来自MDN docs on keydown：

target ...聚焦元素处理关键事件，如果没有合适的输入元素聚焦则为根元素。

因此，如果没有聚焦输入（不仅仅是存在 - 如果取消选择输入字段或按钮，则示例会失败），那么事件目标将成为根元素，或者在这种情况下为document

但是，当你碰巧进行对话时，你真的不想让document的事件处理程序处于极少数情况下，所以你需要做的就是在创建时添加一个事件处理程序对话框，并在关闭对话框时将其删除。

以下示例就是这样做的。

// Store a reference to the key event handler so we can use `off` later
var dialogKeyeventHandler;

// Returns an anonymous event handler, bound to the dialog instance
function makeDialogKeyeventHandler(dialog) {
  return function(evt) {
    if (evt.keyCode === $.ui.keyCode.ESCAPE) {
      alert('test');
      destroyDialog(dialog);
    }
    evt.stopPropagation();
  }
}

// Creates a dialog and binds a key event handler to `document` to close it if ESC is pressed
function createDialog() {
  var dialog = $("#dialog-confirm2")
  .dialog({
    resizable: false,
    height: 150,
    modal: true,
    closeOnEscape: false, //hide x button
  });

  dialogKeyeventHandler = makeDialogKeyeventHandler(dialog);
  $(document).on('keydown', dialogKeyeventHandler);
}

// Close the dialog and unbind the key event handler
function destroyDialog(dialog) {
  dialog.dialog('close');
  $(document).off('keydown', dialogKeyeventHandler);
  dialogKeyeventHandler = null;
}

// Open the dialog
createDialog();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog-confirm2">
  Dialog
</div>

没有输入字段时，不会调用keydown

1 个答案: