web-dev-qa-db-ja.com

jquery-uiダイアログ：ダイアログのボタンをデフォルトのアクションにします（Enterキー）

Jqueryモーダルダイアログで、デフォルトのアクション（ユーザーがEnterを押したときに実行するアクション）としてボタンを選択する方法はありますか？

Jquery Webサイトの例： jquery dialog modal message

上の例では、ユーザーがEscを押すとダイアログが閉じます。ユーザーがEnterキーを押したときに「OK」ボタンアクションが呼び出されるようにします。

javascriptjqueryjquery-uimodal-dialog
55
fgui

ダイアログのオープン機能で、ボタンにフォーカスできます：

_$("#myDialog").dialog({
    open: function() {
      $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus(); 
    }
});
_

異なるインデックスにある場合は:eq(0)を変更するか、名前などで検索します。

36
Nick Craver

私はこれが好きです（私のために働いています）、それは私がなりたい場所に焦点を残します（テキストボックス）

    $("#logonDialog").keydown(function (event) {
        if (event.keyCode == $.ui.keyCode.ENTER) {
            $(this).parent()
                   .find("button:eq(0)").trigger("click");
            return false;
        }
    });

ただし、これは1つのボタン（Okボタン）に対してのみ機能します。必要に応じて、「：eq（n）」を設定して他のボタンを選択できます。

注： Enterキーが処理されたときにイベントバブリングを防ぐためにfalseを返す新しい行を追加しました。以前よりも良くなることを願っています。

33
Eugenio Miró

この方法を試してください：

$("#myDialog").dialog({
    open: function() {
         $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus(); 
    }
});
20
madeuz

この他のstackoverflowの質問 あなたが望む場所を得る必要があります：

$('#DialogTag').keyup(function(e) {
    if (e.keyCode == 13) {
        //Close dialog and/or submit here...
    }
});
12
Thomas

ダイアログ内のすべてのボタンをより細かく制御できる別のオプションは、ボタンの配列として追加することです。次に、open eventで、idでボタンを取得し、必要な操作を実行できます（set the focus）

$('#myDialog').dialog({
    buttons: [  
                {
                    id: "btnCancel",
                    text: "Cancel",
                    click: function(){
                        $(this).dialog('close');
                    }
                },
                {
                    id: "btnOne",
                    text: "Print One",
                    click: function () {
                        SomeFunction(1);
                    }
                },
                {
                    id: "btnTwo",
                    text: "Print Two",
                    click: function(){
                        SomeFunction(0);
                    }
                }
            ],
    open: function () {
        if ($('#hiddenBool').val() != 'True') {
            $('#btnOne').hide();
        }
        $("#btnTwo").focus();
    }
});
8
Mark B

セレクタとしてボタン名を使用するわずかなバリエーション。読みやすくなりましたが、ボタンのテキスト文字列と明らかに重複しています。味にリファクタリングします。

$("#confirm-dialog").dialog({
    buttons: {
        "Cancel" : function(){},
        "OK" : function(){}
    },
    open: function() {
        $(this).siblings('.ui-dialog-buttonpane').find("button:contains('OK')").focus(); 
    }
});
5
matt burns

ただし、最も簡単な方法は、ダイアログ内のフォームで送信アクションを使用することです。

  • ダイアログ内でフォームを要求したくありませんでした（N.B.異なるブラウザーは異なる方法でエンターキーを処理し、一部のユーザーはエンター時にサブミットを実行しません）。
  • ユーザーがEnterキーを押す前にタイトルペインまたはボタンペインをクリックした場合、これが機能することを望みました。
  • 任意のjQueryUIダイアログに使用できるライブラリメソッドを作成したかった。

私が働いている会社は「EBL」であり、グローバルスコープを回避しています...そのため、以下の関数のプレフィックスは

EBL.onUiDialogOpen = function (event, ui, hideX, actionFirstButtonOnEnterKey) {

    if (hideX) {
        // There is no option to hide the 'X' so override.
        $(".ui-dialog-titlebar-close").hide();
    }

    if (actionFirstButtonOnEnterKey) {
        /* (event.target) will give the div that will become the content 
        of a UI dialog, once div is 'opened' is it surrounded by a 
        parent div that contains title and buttonpane divs as well as 
        content div - so I use .parent()

        ...The keyup function is binded to all descendants, therefore:
              -We need the e.stopPropagation() line.
              -This code is NOT what you want if you DON'T want enter 
               key to initiate first button regardless of selected control.
        */
        $(event.target).parent().bind('keydown.justWhileOpen', function (e) {
            if (e.keyCode === $.ui.keyCode.ENTER) {
                e.stopPropagation();
                $(event.target).next('.ui-dialog-buttonpane')
                    .find('button:first').click();
            }
        });
    }
};

...と組み合わせて動作します：

EBL.onUiDialogClose = function (event, ui) {
    // Remove keyup handler when we close dialog
    $(event.target).parent().unbind('.justWhileOpen');
};

動的に作成されたdivを使用し、後で破棄する場合は、.onUiDialogCloseは必要ありません。

非動的ダイアログを初期化するときにこれらのライブラリ関数をどのように使用するかを以下で見ることができます...

$('#divName').dialog({
    //...
    open: function (event, ui) { EBL.onUiDialogOpen(event, ui, false, true); },
    close: function (event, ui) { EBL.onUiDialogClose(event, ui); },
    //...
});

これまでのところ、IE9と最新のchrome/firefoxでこれをテストしました。 「OK」機能でダイアログが必要であると検証する必要があります。

2
Darren

これはjquery 1.10.2を使用してダイアログ内でうまくいきました

dialog({
    focus: function() {
        $(this).on("keyup", function(e) {
            if (e.keyCode === 13) {
                $(this).parent().find("button:eq(1)").trigger("click");
                return false;
            }
        });
    },

より多くのオプション...

1
uksitebuilder
$("#logonDialog").keydown(function (event) {if (event.keyCode == 13) {
        $(this).parent().find("button:eq(0)").trigger("click");
        return false;
    }
});
1
Naveen

バージョン1.10.0を使用しています。私はそれをオープンではなくフォーカスで動作させることができませんでした。これは、2番目のボタンに焦点を合わせます。

focus: function(){
  $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
}
1
Niklaus

私の場合、空のdivで_.dialog_を呼び出してボタンを追加したため、答えがまったく機能しませんでしたdynamically =、したがって$(this).html()は何も返しません。そのため、parent()やsiblings()のようなメソッドを呼び出すことはできず、代わりに何かを期待できませんでした。私がしたことは_ui-dialog-buttonpane_クラスを直接選択し、そこからボタン要素を見つけることでした

HTML

_<div id = "dialogexample">
</div>
_

JQuery

_$("#dialogexample").dialog({
    autoOpen: false,
    modal: true,
    open: function () {
        $('.ui-dialog-buttonpane').find('#otherbutton').focus();
    }
});
var buttons = {
    "MyButton" : {
        text: "Do Stuff",
        id: "dostuffbutton" 
    },
    "OtherButton" : {
        text: "Other Stuff",
        id: "otherbutton"
    }
} 
$("#dialogexample").dialog("option", "buttons", buttons);
$("#dialogexample").dialog("open"); //the second (otherbutton), instead of
                                    //the first (dostuffbutton) button should be focused
_
0
Chris Gong

次のコードはボタンのスタイルを設定し、デフォルトを最後のボタンに設定します。

 open: function(){

      $buttonPane = $(this).next();
      $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-secondary');
      $buttonPane.find('button:last').addClass('cancel').addClass('ui-state-default');
      $buttonPane.find('button:last').focus();

  },
0
Marcel Verwey

：tabbableセレクターとボタンのインデックスを使用する必要があります（0は[X]ボタンであり、1から開始します）

open: function() {
    var tb = $(":tabbable", this.parentNode);
    if(tb.length>1) {
        tb[1].focus();
    }
}
0
Aleksey

私はこれが古いスレッドであることを知っていますが、この正確な機能を探していて、上記のすべてが少し不足していることがわかったので、最良のソリューションだと思うものを実装することができました。

上記の2つの答えの組み合わせです。ボタン要素を見つけるためにfind（）関数に依存するのではなく、IDを使用することは常に私にとってはるかに良い選択のようです。

また、押されるエンターキーを明示的に探すことで、必要に応じてダイアログを開いたときに必要な要素にフォーカスを設定できます。これは、Enterキーが押されたときに特定のボタンを「デフォルト」としてトリガーするという要望を満たしつつ、最も柔軟性を高めることができるようです。また、「キャンセル」デフォルトも実装しました。

これが、ダイアログ用の適切な「デフォルト」ボタンソリューションを探している人に役立つことを願っています。

$("#LoginBox").dialog({
   open: function(){
      $(this).keydown(function (event) {
         if (event.keyCode == 13) {
            $("#LogInButton").trigger("click");
            return false;
         }
         if (event.keyCode == 27) {
            $("#CancelButton").trigger("click");
            return false;
         }
      });
   },
   close: function(){
      $(this).dialog("destroy");
   },
   buttons: [
      {
         id: "LogInButton",
         text: "Log In",
         click: function(){
            //button functionality goes here
            $(this).dialog("destroy");
         }
      },
      {
         id: "CancelButton",
         text: "Cancel",
         click: function(){
            $(this).dialog("destroy");
         }
      }
   ]
});
0
Stephen