3

当我打开一个 jQuery UI 对话框小部件并且对话框中的内容包含一个文本框时，当我按下回车键时对话框会自动关闭。这似乎只在使用 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+ 中）。有什么建议么？

4

3 回答 3

3

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

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

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');
};
于 2013-08-08T21:28:01.930 回答
1

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

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

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

于 2014-11-21T19:20:46.957 回答
0

IE9/IE10 和 IE11 的区别似乎在于 ie9 和 10 在 keydown 时激活，而 ie 11 在 keyup 时激活提交按钮。

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

$(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;
});
于 2015-02-28T00:35:19.090 回答