【问题标题】:jQuery Dialog does not respond to keyboard pressjQuery Dialog 不响应键盘按下
【发布时间】:2012-10-12 15:54:19
【问题描述】:

我有一个 jQuery 确认对话框,当用户按下 Enter 时,它不会触发与默认按钮关联的事件;当我使用鼠标时,按钮的行为符合预期。

默认按钮(“取消”)在我按 Enter 键时会突出显示,但没有其他反应。

这是对话框:

这是产生上述对话框的代码:

$(document).ready(function () {

    $('#m_btnNext').click(function (e) {
            var my_messages = 'warning';
            if (my_messages.length > 0) {
                e.preventDefault();
                $('#dialog-confirm-withdraw').html(my_messages);
                $("#dialog-confirm-withdraw").dialog("open");
                return false;
            }
            return true;    
            });

        var cascadeConfirmWithdrawMarkup = "<div id='dialog-confirm-withdraw' title='Withdraw'><p>Set on build</p></div>";
        $(cascadeConfirmWithdrawMarkup).appendTo('body').hide();

        $('#dialog-confirm-withdraw').dialog({ title: '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Withdraw Warnings',
            width: 400,
            height: 175,
            resizable: false,
            draggable: false,
            modal: true,
            autoOpen: false,
            open: function () {
                $('.ui-dialog-buttonpane button:eq(1)').focus();
            },
            buttons: {
                "Proceed with withdraw": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
});

以最简单的形式,this code works fine,但我很难在我的真实形式中查明罪魁祸首。

我注释掉了所有其他的 javascript,所以只有上面的代码存在;没有错误记录到控制台;但什么也没发生。

如果我上面的 js 没有明显的错误,那么大海捞针最好的方法是什么?

Masochists 可以下载完整的 html 页面(带有所有 javascript),here。我使用 FF 的另存为“网页,完成”来创建该 zip。

请记住,我只是在此表单中添加功能;我没有创建它。

【问题讨论】:

  • 在您的real 表单上,当您按下回车键时,取消按钮是否明确聚焦?您提到突出显示,但只想仔细检查。您可以按 Tab 键在浏览器上的表单字段之间切换以进行测试,因为您无疑已经知道了。
  • 文档中是否有任何按键事件?
  • 我们需要看看你的真实形式还有哪些其他活动。请发布整个代码。
  • @martinwnet 是的。表单加载时突出显示取消按钮。切换到 Proceed withwithdraw 并按 Enter 也无济于事。但是,切换到“X”并按 Enter 会关闭表单。
  • @epascarello 据我所知,没有。我发现了几个附加 KeyPress 和 KeyDown 事件 herehere 的 SO 示例(请参阅 Ken Browning 的回答),但我无法使用它们得到响应)。总的来说,即使在示例中我也无法让它们工作,所以我很可能遗漏了一些东西。

标签: javascript asp.net vb.net jquery-ui


【解决方案1】:

在 halcyonCommon.js 中,您有一个名为 KeyListener() 的函数,该函数在文档加载时调用。该函数为 keydown 添加了一个事件侦听器,它似乎正在处理整个文档的转义和输入 keydown 事件:

        case KeyCode.Enter:             
            if (el.tagName == "INPUT") {                    
                switch (el.type) {
                    case "checkbox" :
                    case "password" :
                    case "radio" :
                    case "text" : 
                        {   //Check for datebox and timebox, has controller --> onblur before click OK
                            if (el.Controller && el.Controller.onblur)
                                el.Controller.onblur({target : el});

                            return oThis.clickAction(oThis._DefaultButton, e); 
                        }
                    break;                      
                    case "file" ://ThamHNguyen, added 14-NOV-06
                        return oThis.clickAction(oThis._DefaultButton, e);
                        break;

                    default:
                        return true;
                }
            } else if (el.tagName == "SELECT") {
                return oThis.clickAction(oThis._DefaultButton, e);              
            } else if (el.tagName == "HTML" || el.tagName == "BODY" || el.tagName == "TD") { //"TD" : on IE only
                return oThis.clickAction(oThis._DefaultButton, e);              
            } else if (el.tagName == "TEXTAREA" || el.tagName == "A" ) {
                return true;
            } else {
                return false; //Prevent default button of IE
            }

看到最后一个 else 案例了吗?删除它可以解决问题,但这可能会导致程序中其他地方出现不良行为。如果是这样,您需要在此行中添加第三种可能的情况以返回 true(因此允许正常行为):

} else if (el.tagName == "TEXTAREA" || el.tagName == "A" )

例如:

} else if (el.tagName == "TEXTAREA" || el.tagName == "A" || el.tagName == "SPAN" )

...虽然这可能不够具体。

【讨论】:

    猜你喜欢
    • 2011-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-21
    • 1970-01-01
    • 2013-10-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多