2

我将如何防止 jQuery 对话框将其打开器集中在关闭上？

我有一个很大的文本区域，当打开对话框时会聚焦。如果页面向下滚动到底部，则当对话框打开时。当对话框关闭时，jQuery UI 聚焦 textarea，并使页面跳回顶部。

这是一个例子：http: //jsfiddle.net/bPqF2/1/

单击锚点，然后关闭对话框。

<div>
    <a id="click-me" href="#bottom">Click me</a>
</div>
<div>
    <textarea style="height: 2000px">
        ...
    </textarea>
</div>
<div>
    <a id="bottom" name="bottom"></a>
</div>

$(function() {
    $('#click-me').click(function() {
        $('textarea').focus();
        setTimeout(function() {
            $('<div>').text('Close me please!').dialog({
                modal: true
            });
        });
    });
});

jQuery UI 的违规行是https://github.com/jquery/jquery-ui/blob/86eaa30994657b650b26388e87ecff679cf93a50/ui/jquery.ui.dialog.js#L181

（注意：上面只是一个自动化的例子，在真实的用例中，用户向下滚动窗口，打开一个对话框（通过单击一个不会窃取焦点的按钮，使用user-select: none），当它关闭时窗口跳转回到顶部）。

如果您看到：http: //jsfiddle.net/bPqF2/9并单击文本区域，向下滚动，然后等待对话框弹出，当它关闭时，窗口将滚动到顶部。

4

2 回答 2

2

这个怎么样？您可以根据自己的喜好调整滚动。如果您愿意，也可以滚动到文本区域的末尾

<div> 
    <a id="click-me" href="#bottom">Click me</a>
</div>
<div>
    <textarea id="myTxtArea" style="height: 2000px"></textarea>
</div>
<div> 
     <a id="bottom" name="bottom"></a>
</div>
<div data-role="dialog" id="myDialog"></div>

$(function () {
    $('#click-me').click(function () {
        var pos = $(document).scrollTop(); // get current position before focus
        $('textarea').focus();
        setTimeout(function () {
            $('#myDialog').text('Close me please!').dialog({
                modal: true,
                close: function (event, ui) {
                    console.log("dialog has closed");
                    $('#myTxtArea').blur();
                    $("html, body").scrollTop(pos);
                }
            });
        });
    });
});

这是关于 jsFiddle 的演示

于 2013-07-16T01:54:18.530 回答
2

改变你href="#bottom"的href="javascript:void(0);"

为什么不添加一个.blur()来撤消用户对 textarea 的关注？

小提琴：http: //jsfiddle.net/bPqF2/8/

于 2013-07-16T02:36:33.023 回答