2

jQueryダイアログがオープナーをクローズに集中させないようにするにはどうすればよいですか?

ダイアログを開いたときにフォーカスされる大きなテキストエリアがあります。ダイアログが開いているときに、ページが一番下までスクロールされた場合。ダイアログが閉じられると、jQuery UI はテキストエリアにフォーカスし、ページを一番上に戻します。

例を次に示します: 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()ユーザーのテキストエリアへのフォーカスを取り消すために a を追加してみませんか?

フィドル: http://jsfiddle.net/bPqF2/8/

于 2013-07-16T02:36:33.023 に答える