フォーム付きのjQuery UIダイアログボックスがあります。ダイアログのボタンのクリックをシミュレートしたいので、マウスやタブを使用する必要はありません。つまり、「OK」ボタンを押すことをシミュレートする通常のGUIダイアログボックスのように動作させたいのです。
これはダイアログの簡単なオプションかもしれないと思いますが、jQuery UIのドキュメントにはありません。keyup（）を使用して各フォーム入力をバインドできますが、よりシンプルでクリーンな方法があるかどうかはわかりませんでした。ありがとう。
回答:
jQuery UIウィジェットにオプションがあるかどうかはわかりませんkeypressが、ダイアログを含むdivにイベントをバインドするだけです...
$('#DialogTag').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
//Close dialog and/or submit here...
}
});
これは、ダイアログのどの要素にフォーカスがあるかに関係なく実行されます。これは、目的に応じて適切な場合とそうでない場合があります。
これをデフォルトの機能にしたい場合は、次のコードを追加できます。
// jqueryui defaults
$.extend($.ui.dialog.prototype.options, {
create: function() {
var $this = $(this);
// focus first button and bind enter to it
$this.parent().find('.ui-dialog-buttonpane button:first').focus();
$this.keypress(function(e) {
if( e.keyCode == $.ui.keyCode.ENTER ) {
$this.parent().find('.ui-dialog-buttonpane button:first').click();
return false;
}
});
}
});
これがどのように見えるかの詳細なビューは次のとおりです。
$( "#dialog-form" ).dialog({
buttons: { … },
open: function() {
$("#dialog-form").keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$(this).parent().find("button:eq(0)").trigger("click");
}
});
};
});
上記の回答をまとめ、重要なものを追加しました
$(document).delegate('.ui-dialog', 'keyup', function(e) {
var target = e.target;
var tagName = target.tagName.toLowerCase();
tagName = (tagName === 'input' && target.type === 'button')
? 'button'
: tagName;
isClickableTag = tagName !== 'textarea' &&
tagName !== 'select' &&
tagName !== 'button';
if (e.which === $.ui.keyCode.ENTER && isClickableTag) {
$(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');
return false;
}
});利点：
textarea、select、buttonまたはタイプのボタンで入力、で入力したユーザがクリックを想像textareaして、フォームに新しい行を取得する代わりに提出しましょう！$(document).readydocument、上記のいくつかのコードのように、ハンドラーを1つのダイアログにのみバインドし、各ダイアログにハンドラーをバインドしません。$('<div><input type="text"/></div>').dialog({buttons: .});:first短所：
eq()ステートメント内で別のボタンを選択するか、関数を呼び出すことができます。'.ui-dialog'質問が古いことはわかっていますが、同じニーズがあったので、使用したソリューションを共有しました。
.delegate()ので、jQuery 3.0で廃止されたことは注目に値し.on()ます。そのため、（1.7以降で利用可能です）おそらくこの時点でのルートです。
$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();JQuery UIの最新バージョン（1.8.1）で美しく動作します。デフォルトとして設定するボタンに応じて、：lastではなく：firstを使用することもできます。
このソリューションには、上記で選択したものと比較して、どのボタンがユーザーのデフォルトボタンであるかを示すという利点があります。ユーザーはボタン間でTABを押すこともでき、Enterキーを押すと現在フォーカスされているボタンをクリックします。
乾杯。
これをより一般的に機能させるための粗雑で効果的な方法：
$.fn.dlg = function(options) {
return this.each(function() {
$(this).dialog(options);
$(this).keyup(function(e){
if (e.keyCode == 13) {
$('.ui-dialog').find('button:first').trigger('click');
}
});
});
}次に、新しいダイアログを作成するときにこれを行うことができます。
$('#a-dialog').mydlg({...options...})その後、通常のjqueryダイアログのように使用します。
$('#a-dialog').dialog('close')より特殊なケースで機能するように改善する方法があります。上記のコードでは、Enterキーが押されたときにトリガーするボタンとして、ダイアログの最初のボタンが自動的に選択されます。また、アクティブなダイアログが常に1つしかないことを前提としています。しかし、あなたはアイデアを理解します。
注：上記のように、Enterで押されるボタンは、セットアップによって異なります。したがって、.findメソッドで：firstセレクターを使用したい場合もあれば、：lastセレクターを使用したい場合もあります。
この答えのようにキーコードを聞くのではなく（これを実行することができませんでした）、ダイアログ内でフォームの送信イベントにバインドしてから、次のように実行できます。
$("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();だから、全体はこのようになります
$("#my_form").dialog({
open: function(){
//Clear out any old bindings
$("#my_form").unbind('submit');
$("#my_form").submit(function(){
//simulate click on create button
$("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();
return false;
});
},
buttons: {
'Create': function() {
//Do something
},
'Cancel': function() {
$(this).dialog('close');
}
}
});ブラウザーによって、Enterキーの扱いが異なります。また、ブラウザーによっては、Enter時に送信が行われない場合があります。
Ben Claytonは最も近く、最も短く、jqueryダイアログが初期化される前にインデックスページの上部に配置できます。ただし、「。live」は非推奨になっていることを指摘しておきます。優先アクションは「.on」になりました。「.on」を「.live」のように機能させたい場合は、委任されたイベントを使用してイベントハンドラーをアタッチする必要があります。また、他のいくつかのこと...
実際のキーコードを覚えておく必要がないので、ui.keycode.ENTERメソッドを使用してEnterキーをテストすることをお勧めします。
クリックセレクターに「$（ '。ui-dialog-buttonpane button：first'、$（this））」を使用すると、メソッド全体がジェネリックになります。
「return false;」を追加したい。デフォルトを防止し、伝播を停止します。
この場合...
$('body').on('keypress', '.ui-dialog', function(event) {
if (event.keyCode === $.ui.keyCode.ENTER) {
$('.ui-dialog-buttonpane button:first', $(this)).click();
return false;
}
});もっと単純なことはわかりませんが、通常はどのボタンが現在フォーカスされているかを追跡します。フォーカスが別のコントロールに変更された場合、「ボタンフォーカス」は最後にフォーカスがあったボタンに残ります。通常、「ボタンフォーカス」はデフォルトのボタンから始まります。別のボタンにタブ移動すると、「ボタンのフォーカス」が変わります。別のフォーム要素に移動すると、「ボタンのフォーカス」がデフォルトのボタンに再びリセットされるかどうかを決定する必要があります。また、フォーカスされたボタンがウィンドウ内の実際のフォーカスを失うため、フォーカスされたボタンを示すために、ブラウザのデフォルト以外の視覚的なインジケータも必要になる可能性があります。
ボタンのフォーカスロジックをダウンして実装したら、おそらくダイアログ自体にキーハンドラーを追加し、現在「フォーカスされている」ボタンに関連付けられているアクションを呼び出します。
編集：私は、フォーム要素に入力しているときにいつでもEnterキーを押して「現在の」ボタンアクションを優先できるようにすることを前提としています。ボタンが実際にフォーカスされているときにのみこの動作が必要な場合、私の答えは複雑すぎます。
私はこの解決策を見つけました、それはIE8、Chrome 23.0およびFirefox 16.0で動作します
Robert Schmidtのコメントに基づいています。
$("#id_dialog").dialog({
buttons: [{
text: "Accept",
click: function() {
// My function
},
id: 'dialog_accept_button'
}]
}).keyup(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER)
$('#dialog_accept_button').click();
});私はそれが誰にも役立つことを願っています。
私はそのようにした...;）それが誰かに役立つことを願っています。
$(window).keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(".ui-dialog:visible").find('.ui-dialog-buttonpane').find('button:first').click();
return false;
}
});これにより、ボタンのクリックハンドラーのクリックがトリガーされます。この例では、jquery.validateプラグインを使用するようにダイアログのフォームをすでに設定していることを前提としています。しかし、簡単に適応できます。
open: function(e,ui) {
$(this).keyup(function(e) {
if (e.keyCode == 13) {
$('.ui-dialog-buttonpane button:last').trigger('click');
}
});
},
buttons: {
"Submit Form" : function() {
var isValid = $('#yourFormsID').valid();
// if valid do ajax call
if(isValid){
//do your ajax call here. with serialize form or something...
}
}私はすでに多くの答えがあることを理解していますが、私の解決策は最も近いものであり、おそらく最短であると自然に考えています。将来作成されるダイアログで機能するという利点があります。
$(".ui-dialog").live("keyup", function(e) {
if (e.keyCode === 13) {
$('.ok-button', $(this) ).first().click();
}
});これが私がしたことです：
myForm.dialog({
"ok": function(){
...blah...
}
Cancel: function(){
...blah...
}
}).keyup(function(e){
if( e.keyCode == 13 ){
$(this).parent().find('button:nth-child(1)').trigger("click");
}
});この場合、myFormはフォームのhtmlを含むjQueryオブジェクトです（注、そこに「フォーム」タグはありません...これらを画面全体に配置すると、「Enter」を押すと更新されます）。
ユーザーがフォーム内から「Enter」を押すと、「OK」ボタンをクリックするのと同じことになります。
これにより、「OK」ボタンがすでに強調表示された状態でフォームが開かれるという問題も回避されます。フィールドのないフォームの場合はこれで十分ですが、ユーザーがデータを入力する必要がある場合は、最初のフィールドを強調表示する必要があります。
ボタン要素セレクターを知っている場合：
$('#dialogBox').dialog('open');
$('#okButton').focus();あなたのためのトリックを行う必要があります。これにより、[OK]ボタンがフォーカスされ、Enterキーを押すと、期待どおりに「クリック」されます。これは、ネイティブUIダイアログで使用されるのと同じ手法です。
私はこの問題の非常に単純な解決策を見つけました：
var d = $('<div title="My dialog form"><input /></div>').dialog(
buttons: [{
text: "Ok",
click: function(){
// do something
alert('it works');
},
className: 'dialog_default_button'
}]
});
$(d).find('input').keypress(function(e){
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
e.preventDefault();
$('.dialog_default_button').click();
}
});コメントを投稿するのに十分な評判がないので。
$(document).delegate('.ui-dialog', 'keyup', function(e) {
var tagName = e.target.tagName.toLowerCase();
tagName = (tagName === 'input' && e.target.type === 'button') ? 'button' : tagName;
if (e.which === $.ui.keyCode.ENTER && tagName !== 'textarea' && tagName !== 'select' && tagName !== 'button') {
$(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');
return false;
} else if (e.which === $.ui.keyCode.ESCAPE) {
$(this).close();
}
});Basemm＃35による修正された回答もEscapeに追加してダイアログを閉じます。
ありがとうございます!!!
open: function () {
debugger;
$("#dialogDiv").keypress(function (e) {
if (e.keyCode == 13) {
$(this).parent().find("#btnLoginSubmit").trigger("click");
}
});
},
ボタンクラスを提供し、通常の方法でそれらを選択します。
$('#DialogTag').dialog({
closeOnEscape: true,
buttons: [
{
text: 'Cancel',
class: 'myCancelButton',
click: function() {
// Close dialog fct
}
},
{
text: 'Ok',
class: 'myOKButton',
click: function() {
// OK fct
}
}
],
open: function() {
$(document).keyup(function(event) {
if (event.keyCode === 13) {
$('.myOKButton').click();
}
});
}
});