제출 jQuery UI 대화 상자
양식이 있는 jQuery UI 대화상자가 있습니다.마우스나 탭을 사용하지 않아도 되도록 대화 상자의 버튼 중 하나를 클릭해 보고 싶습니다.다시 말해, "확인" 버튼을 누르는 시뮬레이션을 하는 일반 GUI 대화 상자처럼 작동하기를 원합니다.
대화상자에 간단한 옵션일 수도 있다고 생각하지만 jQuery UI 설명서에서는 찾을 수 없습니다.각 양식 입력을 keyup()으로 묶을 수는 있었지만 더 간단한/청소하는 방법이 있는지는 몰랐습니다.감사해요.
jQuery UI 위젯에 옵션이 있는지는 모르겠지만 간단히 바인딩할 수 있습니다.keypress대화 상자가 들어 있는 div에 대한 event to 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새로운 라인이 아닌 양식을 제출받으세요! - 바인딩은 한 번 수행됩니다. 대화 상자가 '열릴 때마다 동일한 기능을 몇 번이고 바인딩하지 않도록 '열림' 콜백을 사용하지 마십시오.
- 위의 일부 답변에서 알 수 있듯이 기존 코드 변경을 방지합니다.
- 더 이상 사용하지 않는 '라이브' 대신 'delegate'를 사용하고 이전 버전의 jquery에서 작업할 수 있도록 새 'on' 메서드를 사용하지 마십시오.
- 대리인을 사용하기 때문에 대화를 초기화하기 전에도 위의 코드를 작성할 수 있습니다.그것이 없어도 헤드 태그에 넣을 수 있습니다.
$(document).ready - 위임자는 한 만 .
document다를 에서처럼 각 . - 합니다와 같이 된 대화 합니다.
$('<div><input type="text"/></div>').dialog({buttons: .}); - 7/8/9와 함께 일했습니다!
- 는 하지 마십시오.
:first - 숨겨진 제출 버튼을 만들기 위해 여기 답변에서와 같은 해킹을 사용하지 마십시오.
단점:
- 로 할 수 . 다른 단추를 선택할 수 있습니다.
eq()문합니다인 경우) 를 호출합니다. - 모든 상자에는 됩니다. 를 '#dialog' 대신 '#' 로로 수 .
'.ui-dialog'
질문이 오래된 것은 알지만 저도 같은 요구를 가지고 있었기 때문에 제가 사용했던 솔루션을 공유했습니다.
$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();
JQuery UI(1.8.1)의 최신 버전과 함께 아름답게 동작합니다.기본값으로 설정할 단추에 따라 :last 대신 :first를 사용할 수도 있습니다.
이 솔루션은 위에서 선택한 것과 비교하여 어떤 버튼이 사용자의 기본 버튼인지를 보여주는 장점이 있습니다.사용자는 버튼 사이를 탭할 수도 있으며 ENTER를 누르면 현재 포커스 중인 버튼이 클릭됩니다.
건배.
Ben Clayton's는 가장 깔끔하고 짧으며 jquery 대화가 초기화되기 전에 색인 페이지 상단에 배치할 수 있습니다.하지만 ".live"가 사용되지 않았음을 지적하고자 합니다.현재 선호하는 작업은 ".on"입니다.".on"이 ".live"와 같이 작동하려면 위임된 이벤트를 사용하여 이벤트 핸들러를 연결해야 합니다.그리고 몇가지 다른 것들은...
저는 ui.key 코드를 사용하는 것을 선호합니다.실제 키코드를 기억할 필요가 없으므로 엔터키 테스트 방법을 입력합니다.
클릭 선택기에 "$('.ui-dialog-button 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;
}
});
이 작업을 보다 포괄적으로 수행할 수 있는 조잡하지만 효과적인 방법:
$.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')
좀 더 특별한 경우에 효과가 있도록 개선하는 방법이 있습니다.위의 코드를 사용하면 입력 시 트리거할 버튼으로 대화상자의 첫 번째 버튼을 자동으로 선택합니다.또한 특정 시간에 활성 대화 상자가 하나만 있다고 가정하며, 그렇지 않을 수도 있습니다.하지만 당신은 이해합니다.
참고: 위에 언급한 바와 같이 입력 시 누르는 버튼은 설정에 따라 달라집니다.따라서 .find 메서드에서 :first selector를 사용하는 경우도 있고 :last selector를 사용하는 경우도 있습니다.
이 답변과 같은 키 코드를 듣는 대신(작업할 수 없었습니다) 대화 상자 내에서 양식의 제출 이벤트에 바인딩한 후 다음 작업을 수행할 수 있습니다.
$("#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');
}
}
});
브라우저마다 엔터키를 다르게 처리하며, 항상 엔터키를 제출하지 않는 브라우저도 있습니다.
더 간단한 건 모르겠지만, 보통은 어떤 버튼이 현재 포커스를 가지고 있는지 추적합니다.포커스가 다른 컨트롤로 변경되면 포커스가 마지막에 있었던 버튼에 "버튼 포커스"가 유지됩니다.일반적으로 "버튼 포커스"는 기본 버튼에서 시작됩니다.다른 버튼으로 탭을 누르면 "버튼 포커스"가 변경됩니다.다른 양식 요소로 이동하면 "버튼 포커스"가 다시 기본 단추로 재설정되는지 여부를 결정해야 합니다.창에서 실제 포커스를 잃기 때문에 포커스 버튼을 표시하려면 브라우저 기본값 이외의 시각적 표시기가 필요할 수도 있습니다.
버튼 포커스 로직을 아래로 내리고 구현하면 대화 상자 자체에 키 핸들러를 추가하고 현재 "포커스" 버튼과 관련된 작업을 호출할 수 있습니다.
편집: 양식 요소를 작성할 때 언제든지 입력할 수 있고 "현재" 버튼 작업이 우선이라고 가정합니다.버튼이 실제로 초점이 맞춰질 때만 이런 행동을 원한다면 제 대답은 너무 복잡합니다.
이 솔루션을 찾았습니다. IE8, Chrome 23.0 및 Firefox 16.0에서 작동합니다.
로버트 슈미트의 논평에 근거한 겁니다
$("#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();
});
누구에게나 도움이 되었으면 좋겠습니다.
브라우저가 이미 지원하는 기본 기능을 잊어버리기도 합니다.
<input type="submit" style="visibility:hidden" />
그러면 키가 양식을 제출하게 됩니다.
그런 식으로...;) 누군가에게 도움이 되길..
$(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 개체입니다(참고로 "form" 태그가 없습니다...화면 전체에 입력하면 "Enter"(입력)를 누르면 새로 고쳐집니다.
사용자가 양식 내에서 "입력"을 누를 때마다 "확인" 단추를 클릭하는 것과 같습니다.
이렇게 하면 이미 "확인" 버튼이 강조 표시된 상태에서 양식을 여는 문제도 방지할 수 있습니다.필드가 없는 양식의 경우에는 좋지만, 사용자가 항목을 입력해야 하는 경우에는 첫 번째 필드가 강조 표시되기를 원할 수 있습니다.
완전히 끝.
$('#login input').keyup(function(e) {
if (e.keyCode == 13) {
$('#login form').submit();
}
}
버튼 요소 셀렉터를 알고 있는 경우:
$('#dialogBox').dialog('open');
$('#okButton').focus();
당신을 위해 속임수를 써야 합니다.이렇게 하면 확인 버튼이 포커스가 되고, enter(입력)로 예상하는 대로 '클릭'됩니다.이는 네이티브 UI 대화상자에서 사용되는 것과 동일한 기법입니다.
$("#LogOn").dialog({
modal: true,
autoOpen: false,
title: 'Please Log On',
width: 370,
height: 260,
buttons: { "Log On": function () { alert('Hello world'); } },
open: function() { $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();}
});
이 문제에 대한 아주 간단한 해결책을 찾았습니다.
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();
}
});
$('#DialogID').dialog("option", "buttons")["TheButton"].apply()
이것은 나에게 아주 효과적이었습니다.
IE9에서는 이러한 솔루션 중 어떤 것도 제게 적합하지 않은 것 같습니다.결국엔 이걸..
$('#my-dialog').dialog({
...
open: function () {
$(this).parent()
.find("button:eq(0)")
.focus()
.keyup(function (e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$(this).trigger("click");
};
});
}
});
본문 아래는 본문에 대화 DIV가 추가되어 사용되므로 본문에서 키보드 이벤트를 청취합니다.IE8,9,10, 모질라, 크롬에서 테스트했습니다.
open: function() {
$('body').keypress(function (e) {
if (e.keyCode == 13) {
$(this).parent().find(".ui-dialog-buttonpane button:eq(0)").trigger("click");
return false;
}
});
}
왜냐하면 저는 평판이 좋지 않아서 댓글을 달 수가 없어요.
$(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에서 수정된 답변을 이스케이프에 추가하여 대화상자를 닫습니다.
잘 작동합니다. 감사합니다.
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();
}
});
}
});
언급URL : https://stackoverflow.com/questions/868889/submit-jquery-ui-dialog-on-enter
'programing' 카테고리의 다른 글
| 포트 3306에서 실행 중인 다른 mysqld 서버 오류 (0) | 2023.10.14 |
|---|---|
| WordPress에서 기본 즐겨찾기 아이콘 제거 (0) | 2023.10.14 |
| 마리아드비 기둥 매장의 최대 한도는 어떻게 됩니까? (0) | 2023.10.14 |
| Git에서 커밋하기 전에 스테이지를 원하는 이유는 무엇입니까? (0) | 2023.10.14 |
| Excel, SSRS에서 텍스트로 출력된 번호 필드 (0) | 2023.10.14 |