web-dev-qa-db-ja.com

jQuery UIダイアログボタンフォーカス

JQuery UIダイアログが開くと、ボタンの1つを選択して強調表示するか、フォーカスを設定するなど...ダイアログを開いたときにボタンが強調表示されないようにこの動作を停止するにはどうすればよいですか？

[〜＃〜] edit [〜＃〜]：ダイアログオプションで次のことを試しましたが、ボタンからフォーカスが削除されませんでした。

...
open:function(event, ui) { $("myunimportantdiv").focus(); },
...

[〜＃〜] note [〜＃〜]：一時的な回避策として、.ui-state-focusしかし、これは理想的ではありません...

jquery-uidialog
58
davidsleeps

Blurメソッドを使用します。このサンプルを試すことができます。

<html>
    <head>
        <title>No Focus on jQuery Dialog</title>
        <link type="text/css" rel="stylesheet" href="ui.all.css" />
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.dialog.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // Dialog to confirm or cancel
                // Focuses on confirm by default.
                $('#noFocusDialog').dialog({
                    autoOpen: false,
                    buttons: {
                        Confirm: function() {
                            $(this).dialog('close');
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                        }
                    }
                });

                // Trigger to open the dialog
                $('#openNoFocusDialog').click(function() {
                    $('#noFocusDialog').dialog('open');

                    // Remove focus on all buttons within the
                    // div with class ui-dialog
                    $('.ui-dialog :button').blur();
                });
            });
        </script>
    </head>
    <body>
        <a id="openNoFocusDialog" href="#">Open Dialog</a>
        <div id="noFocusDialog">
            <p>Confirm that no elements have focus</p>
        </div>
    </body>
</html>
68
Ed I

回答のおかげですが、最良の解決策（少なくとも私にとっては、最小限のコードであり、DOMのメソッドを不必要に使用しない）は、オブジェクトの配列でダイアログボタンを定義することです。

buttons: [{
            id  :   "button1",
            text    :   "Button1 text",
            title   :   "tooltip1text1",
            tabIndex:   -1,
            click   :   clickCallback 
        },{
            id      :   "button2",
            text    :   "Button2 text", 
            title   :   "tooltip1text2",
            tabIndex:   -1,
            click   :   function(){$(this).dialog("close")}
        }]

ボタンにフォーカスを移さないようにするための重要な部分は次のとおりです。 tabIntex：-1

また、ボタンにidを与える便利で読みやすい方法です。

17
Aureltime

私はこれと同じ問題を抱えていました...別の要素にフォーカスを設定しようとしても、私にとってはうまくいかないようですが、選択した要素（「オープン」コールバック内）からフォーカスをぼかします：

    $('#dialog').dialog
    ({
    open: function ()
        {
        $('#element-that-gets-selected').blur();
        }
    });

特定の名前を指定せずにフォーカスを防ぐ方法は、次のように最初にセレクターを使用することだと思います：

    $('#dialog').dialog
    ({
    open: function ()
        {
        $(this).find('select, input, textarea').first().blur();
        }
    });
8
Lev
buttons: [
    {
        tabIndex: -1,
        text: 'Yes',
        click: function(){
            DeleteStuff();
            $(this).dialog('close');
        }
    },
    {
        text: 'No',
        click: function(){
            // Don't delete
            $(this).dialog('close');
        }
    }
]

これは私がそれを機能させる唯一の方法です。 tabIndex：-1が解決策です。

ああ、2番目のボタンに集中したかったので、「アイテムを削除しますか？」デフォルトでは、確認はアイテムを削除しません。

6
Niklaus

開いたときにjQuery Dialogが興味深い領域にスクロールする原因は明らかです。今ではほぼどこでも参照されています。

ブラーは機能しますが、コンテンツが多い場合は機能しません。ボタンがコンテンツの下部にある場合、ぼかしは選択を削除しますが、ダイアログを下部までスクロールしたままにします。 scrollTopを使用すると、コンテンツが上部にスクロールされますが、ボタンは選択されたままになります。ユーザーが誤ってリターンキーを押すと、ボタンまたはリンクが起動します。私は組み合わせを選びました：

$('#dialog').dialog({
    open: function (event, ui){

        $('a_selector').blur();
        $(this).scrollTop(0); 

    }
});

チャンピオンのように働いた...

4
user82646

これは私が通常行うことであり、常に動作します：

open: function() {
    $('.ui-dialog button').removeClass('ui-state-focus');
},
1
silkfire

EDとLevの答えに基づいて、私はこの良い解決策を得ました：

    jQuery("#testDialog").dialog({
        height: 280,
        width: 400,

        open: function () {             
            jQuery(this).closest( ".ui-dialog" ).find(":button").blur();
        }
    });
1
Justin

答えがすでに選択されていることは知っていますが、昔ここで見つけた簡単なHTMLソリューションがあります。

ダイアログとして指定するDIV内の最初の要素として次のコードを追加します。

<span class="ui-helper-hidden-accessible"><input type="text" /></span>
1
Matt Finucane

さて、ここでのすべての解決策はコードまたはハッキングに関係しているようです。だから、私は私の投稿、それはCSSオーバーライドに基づいています。私を悩ませたのは、ボタンを「選択済み」に見えるようにするアウトラインであったため、単に「なし」でオーバーライドしました。

.ui-dialog .ui-dialog-titlebar button.ui-button:focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-active,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-hover  {
    outline:none;
}

あなたを悩ませている他のスタイルを追加/上書きすることもできます:)

1
John Bernardsson

または、他のボタンを呼び出す前にダミーの入力を作成するだけでも同様に機能します。これは、UIが最初の「入力」をデフォルトとして単純に検索するためです。UIを欺いて最初に誤った入力を見るようにすることで、フォーカスがリダイレクトされます。

<div id="dialog-confirm" title="Warning!">
<input type='text' size='0' style='position:relative;top:-500px;' />
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 0 0 0;"></span>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
 amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo.</p>
</div>
0
Mgfranz

この方法でこれを行うことができます。 jquery-ui-1.12.0.custom/jquery-ui.css-> onuline：none 896行に追加ouline：none

.ui-widget button {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 1em;
        outline:none;
    }
0
shinchul son

私はこれを修正するために、他の人が役に立つと思われる小さなハックを見つけました。このような解決策は私にとってうまくいくようです：

$( "#button" ).click(function() {                                   
    // this is a hack to prevent the focus from remaining after a click
    $(this).toggle(this.checked);                                       
});

単にプログラムでチェックを再設定するだけで、フォーカスの問題が解消されるようです。

0
poleguy

この行を追加して、オートフォーカス機能を削除します。

$.ui.dialog.prototype._focusTabbable = function(){};

共有javascriptファイルに追加すると、すべてのダイアログのオートフォーカスが防止されます！すべてのダイアログでコピーアンドペーストする必要はありません

0
joalcego