Question

当我打开jQuery UI对话框小部件并且对话框中的内容包含文本框时，按Enter键时对话框会自动关闭。这似乎只在使用IE9或IE10时才会发生。当我在文本框中按Enter键时，我不希望关闭对话框。

我有以下HTML：

<!DOCTYPE html>

<html>

<head>
<title>Testpage</title>

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#myDialog').dialog();
    });
</script>

</head> 

<body>  

    <div id="myDialog">
        Some text           
        <input type="text"></input>
    </div>

</body>
</html>

当您打开此HTML页面时，按Enter键时对话框将关闭（仅在IE9 +中）。有什么建议吗？

Answer 1

在jQuery UI 1.10.x中，右上角的关闭按钮从<a>更改为<button>。由于此按钮未指定type属性，因此它被视为type="submit"。当您在IE9 +中按Enter键时，浏览器会查找提交按钮，找到关闭按钮，然后按下它。

有几种方法可以解决这个问题，我认为最好的方法是通过覆盖ui.dialog的_init函数来纠正关闭按钮的类型：

var baseInit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function () {
    baseInit.apply(this, arguments);

    // Make the close button a type "button" rather than "submit". This works
    // around an issue in IE9+ where pressing enter would trigger a click of
    // the close button.
    $('.ui-dialog-titlebar-close', this.uiDialogTitlebar).attr('type', 'button');
};

Answer 2

如果对话框不需要自动打开，则在创建对话框之后和打开对话框之前：

        $("button.ui-dialog-titlebar-close").attr("type","button");

此外，如果对话框html中有任何按钮元素，请确保在其中明确包含type =“button”属性，或输入输入控件将触发与按钮关联的操作。

Answer 3

IE9 / IE10和IE11之间的差异似乎是ie9和10在keydown上激活，而11则激活了keyup上的提交按钮。

如果您正在处理keyup以采取自己的行动，它将适用于大多数浏览器...除了9-10。另一个解决方案是覆盖keydown，但要小心仍然允许某些控件获取回车键：

$(document).on('keydown', '.ui-dialog', function (e) {
    var tagName = e.target.tagName.toLowerCase();
    if (e.which !== $.ui.keyCode.ENTER) return true;
    if (tagName === 'textarea') return true;
    if (tagName === 'select') return true;
    e.preventDefault();

    return false;
});

输入时关闭jQuery UI对话框

3 个答案: