防止jQuery对话框将打开器聚焦于关闭

我如何防止jQuery对话框将其开瓶器集中在close上

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

以下是一个例子：

单击定位点，然后关闭对话框

<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
            });
        });
    });
});

...

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

如果您看到：并单击文本区域，向下滚动，等待对话框弹出，当对话框关闭时，窗口将滚动到顶部。
这如何？你可以根据自己的喜好调整卷轴。如果愿意，也可以滚动到文本区域的末尾

<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);
                }
            });
        });
    });
});


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

<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);
                }
            });
        });
    });
});


将您的
href=“#bottom”
更改为
href=“javascript:void（0）；”

为什么不添加一个
.blur（）
来撤销用户对文本区域的关注

小提琴：
将您的
href=“#bottom”
更改为
href=“javascript:void（0）；”

为什么不添加一个
.blur（）
来撤销用户对文本区域的关注

小提琴：
我不希望它滚动到最后。我希望它根本不滚动。（保留对话框打开时的滚动位置）。好的，我想只需文本区域上的
blur
，就可以完成吗？不，按照原来的，它是在关闭时滚动到顶部的。@Petah我做了一个新的编辑，我希望现在对你有用。如果你触发一次点击，通过控制台打开该对话框，你可以看到当对话框关闭时，你会回到原来的滚动高度。是的，这是一个可能的解决办法。但我宁愿完全阻止它发生。有问题的代码是：我不希望它滚动到最后。我希望它根本不滚动。（保留对话框打开时的滚动位置）。好的，我想只需文本区域上的
blur
，就可以完成吗？不，按照原来的，它是在关闭时滚动到顶部的。@Petah我做了一个新的编辑，我希望现在对你有用。如果你触发一次点击，通过控制台打开该对话框，你可以看到当对话框关闭时，你会回到原来的滚动高度。是的，这是一个可能的解决办法。但我宁愿完全阻止它发生。令人不快的代码是：为什么在那里有一个focus（）？@FrancisKim作为一个自动示例。在我的实际用例中，当对话框打开时，用户已经手动聚焦textarea。为什么在那里有一个focus（）。在我的实际用例中，当对话框打开时，用户手动聚焦文本区域。正如我在评论中所说，这只是一个自动的例子。如果您看到：并单击文本区域，向下滚动，等待对话框弹出，当对话框关闭时，窗口将滚动到顶部。@Petah我知道它是自动的。但是如果它是手动聚焦的，那么无论如何你都应该使它模糊，以防止默认的浏览器操作（向上滚动）？而且它最初会向下滚动，因为你已经链接到了锚。不是jQuery.dialog（）做的，你看过第二个例子了吗？即使您手动向下滚动，它也会这样做。是的，是jqueryui在做这件事。事实上，这正是这句话：@Petah我不知道这些代码是如何让你的窗口向上滚动的。正如我在评论中所说，这只是一个自动的例子。如果您看到：并单击文本区域，向下滚动，等待对话框弹出，当对话框关闭时，窗口将滚动到顶部。@Petah我知道它是自动的。但是如果它是手动聚焦的，那么无论如何你都应该使它模糊，以防止默认的浏览器操作（向上滚动）？而且它最初会向下滚动，因为你已经链接到了锚。不是jQuery.dialog（）做的，你看过第二个例子了吗？即使您手动向下滚动，它也会这样做。是的，是jqueryui在做这件事。事实上，这正是这句话：@Petah我不明白代码是如何让你的窗口向上滚动的。