jQuery UI 대화상자에서 첫번째 텍스트 상자에 포커스를 설정하지 못하도록 합니다.
사용자가 링크를 클릭할 때 표시되도록 jQuery UI modal 대화상자를 설정했습니다.해당 대화상자 div 태그에는 두 개의 텍스트 상자(간단하게 1에 대한 코드만 표시)가 있으며 초점에 따라 반응하는 jQuery UI DatePicker 텍스트 상자로 변경됩니다.
문제는 jQuery UI 대화상자('open')가 어떻게든 포커스가 있는 첫 번째 텍스트 상자를 트리거하고, 그 다음에 바로 날짜 선택 달력이 열리도록 트리거한다는 것입니다.
그래서 자동적으로 초점이 생기지 않도록 하는 방법을 찾고 있습니다.
<div><a id="lnkAddReservation" href="#">Add reservation</a></div>
<div id="divNewReservation" style="display:none" title="Add reservation">
<table>
<tr>
<th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
<td>
<asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
</td>
</tr>
</table>
<div>
<asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var dlg = $('#divNewReservation');
$('.datepicker').datepicker({ duration: '' });
dlg.dialog({ autoOpen:false, modal: true, width:400 });
$('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
dlg.parent().appendTo(jQuery("form:first"));
});
</script>
그 위에 숨겨진 스팬을 추가하고, ui-helper-hidden-accessible을 사용하여 절대 위치에 의해 숨겨진 스팬을 만듭니다.당신이 jquery-ui의 대화를 사용하고 있고 jquery-ui에 있기 때문에 그 수업이 있는 것으로 알고 있습니다.
<span class="ui-helper-hidden-accessible"><input type="text"/></span>
jQuery UI 1.10.0 Changelog에는 티켓 4731이 수정된 것으로 나열됩니다.
focusSelector가 구현되지는 않았지만 다양한 요소에 대한 계단식 검색이 대신 사용된 것 같습니다.티켓에서:
자동 포커스를 확장하고 [자동 포커스]로 시작하여 :탭 가능한 내용, 단추 창, 단추 닫기
합니다인 합니다.autofocus 그리고 을 맞춰야 입니다.
<input autofocus>
설명서에서는 포커스 논리를 설명합니다(목차 바로 아래, 'Focus' 제목 아래).
대화 상자를 열면 포커스가 다음과 일치하는 첫 번째 항목으로 자동 이동됩니다.
- 의 첫 로,
autofocus- .
:tabbable내용- .
:tabbable창- 대화상자의 닫기 단추
- 대화 자체가
jQuery UI >= 1.10.2에서 프로토타입 메소드를 위약 함수로 대체할 수 있습니다.
$.ui.dialog.prototype._focusTabbable = $.noop;
이것은 모두에게 영향을 미칠 것입니다.dialog각 페이지를 수동으로 편집할 필요 없이 s로 이동합니다.
은 로 첫 것 외에는 않습니다.autofocus /성 /성tabbable요소 / 또는 대화 상자 자체로 돌아갑니다.한에 초점을 것이기 을하여 입니다로 하는 데 입니다.noop.
jQuery UI 1.10.0부터는 HTML5 속성 autofocus를 사용하여 어떤 입력 요소에 초점을 맞출지 선택할 수 있습니다.
대화 상자에서 첫 번째 입력으로 더미 요소를 만들기만 하면 됩니다.여러분을 위해 초점을 흡수할 것입니다.
<input type="hidden" autofocus="autofocus" />
이는 2013년 2월 7일 Chrome, Firefox 및 Internet Explorer(모든 최신 버전)에서 테스트되었습니다.
http://jqueryui.com/upgrade-guide/1.10/ #specify에 element에 초점을 맞추는 부가 기능 온 오픈
저는 다음 코드에서 jQuery UI 대화 함수를 열도록 찾았습니다.
c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();
jQuery 동작을 해결하거나 동작을 변경할 수 있습니다.
tabindex -1은 해결 방법으로 작동합니다.
그냥 장난치다가 알게 됐어요.
이 솔루션을 사용하여 포커스를 제거하고 처음 대화 상자에 들어갈 때 키가 작동을 중지(즉, 대화 상자를 닫음)하도록 했습니다.
대화 상자가 열리고 를 즉시 누르면 대화 상자가 닫히지 않습니다(이 대화 상자가 활성화된 경우). 초점이 숨겨진 필드 등에 있고 키 누르기 이벤트가 발생하지 않기 때문입니다.
이를 수정하는 방법은 오픈 이벤트에 추가하여 대신 첫 번째 필드에서 포커스를 제거하는 것이었습니다.
$('#myDialog').dialog({
open: function(event,ui) {
$(this).parent().focus();
}
});
이렇게 하면 보이지 않는 대화 상자에 포커스가 설정되고 키가 작동합니다.
입력의 탭 인덱스를 -1로 설정한 다음 나중에 필요한 경우 dialog.open을 설정하여 탭 인덱스를 복원합니다.
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
width: 500,
autoOpen: false,
resizable: false,
open: function()
{
$( "#datepicker1" ).attr("tabindex","1");
$( "#datepicker2" ).attr("tabindex","2");
}
});
});
내 해결책:
open: function(){
jQuery('input:first').blur();
jQuery('#ui-datepicker-div').hide();
},
나는 대화보다 더 긴 내용을 가지고 있었습니다.열려 있으면 대화 상자가 맨 아래에 있는 첫 번째 :tabable로 스크롤됩니다.여기가 제 해결책이었습니다.
$("#myDialog").dialog({
...
open: function(event, ui) { $(this).scrollTop(0); }
});
간단한 해결 방법:
tabindex=1로 보이지 않는 요소만 만들면 됩니다...이렇게 하면 날짜 선택기에 초점이 맞춰지지 않습니다...
예:
<a href="" tabindex="1"></a>
...
Here comes the input element
원래 sollife에서 다른 답변으로 올린 jQuery UI ticket #4731을 통해 읽고 구현한 솔루션입니다. (티켓도 본인이 제작하였습니다.)
먼저 페이지에 자동 완성을 적용할 때 사용하는 방법에 관계없이 다음 코드 줄을 추가합니다.
$.ui.dialog.prototype._focusTabbable = function(){};
그러면 jQuery의 "자동 초점" 동작이 비활성화됩니다.사이트에 계속 광범위하게 액세스할 수 있도록 하려면 추가 코드를 추가할 수 있도록 대화상자 작성 방법을 랩핑하고 첫 번째 입력 요소에 초점을 맞추는 호출을 추가합니다.
function openDialog(context) {
// Open your dialog here
// Usability for screen readers. Focus on an element so that screen readers report it.
$("input:first", $(context)).focus();
}
키보드를 통해 자동 완성 옵션을 선택할 때 접근성을 높이기 위해 jQuery UI의 "select" 자동 완성 콜백을 재정의하고 텍스트Element가 선택한 후 IE 8에서 포커스를 잃지 않도록 몇 가지 코드를 추가합니다.
요소에 자동 완성을 적용하기 위해 사용하는 코드는 다음과 같습니다.
$.fn.applyAutocomplete = function () {
// Prevents jQuery dialog from auto-focusing on the first tabbable element.
// Make sure to wrap your dialog opens and focus on the first input element
// for screen readers.
$.ui.dialog.prototype._focusTabbable = function () { };
$(".autocomplete", this)
.each(function (index) {
var textElement = this;
var onSelect = $(this).autocomplete("option", "select");
$(this).autocomplete("option", {
select: function (event, ui) {
// Call the original functionality first
onSelect(event, ui);
// We replace a lot of content via AJAX in our project.
// This ensures proper copying of values if the original element which jQuery UI pointed to
// is replaced.
var $hiddenValueElement = $("#" + $(textElement).attr('data-jqui-acomp-hiddenvalue'));
if ($hiddenValueElement.attr("value") != ui.item.value) {
$hiddenValueElement.attr("value", ui.item.value);
}
// Replace text element value with that indicated by "display" if any
if (ui.item.display)
textElement.value = ui.item.display;
// For usability purposes. When using the keyboard to select from an autocomplete, this returns focus to the textElement.
$(textElement).focus();
if (ui.item.display)
return false;
}
});
})
// Set/clear data flag that can be checked, if necessary, to determine whether list is currently dropped down
.on("autocompleteopen", function (event, ui) {
$(event.target).data().autocompleteIsDroppedDown = true;
})
.on("autocompleteclose", function (event, ui) {
$(event.target).data().autocompleteIsDroppedDown = false;
});
return this;
}
닫기 단추를 포커스하려면 이 옵션을 제공할 수 있습니다.
.dialog({
open: function () {
$(".ui-dialog-titlebar-close").focus();
}
});
이는 jQuery 플러그인 문제가 아닌 브라우저 동작일 수 있습니다.팝업을 연 후 프로그램적으로 포커스를 제거해 본 적이 있습니까?
$('#lnkAddReservation').click(function () {
dlg.dialog('open');
// you may want to change the selector below
$('input,textarea,select').blur();
return false;
});
그것을 테스트하지는 않았지만 잘 작동할 것입니다.
저도 같은 문제로 대화가 열릴 때마다 초점을 뺏는 날짜 선택기 전에 빈 입력을 넣어 해결했습니다.이 입력은 대화 상자의 모든 열 때 숨겨지고 닫힐 때 다시 표시됩니다.
지금은 아무도 해결책을 찾지 못한 건 멋진 일이지만, 당신에게 줄 뭔가가 있는 것 같군요.나쁜 소식은 입력과 링크가 내부에 없더라도 대화상자에 초점이 맞춰진다는 것입니다.저는 대화 상자를 도구 설명으로 사용하고 원래 요소에 포커스를 유지해야 합니다.해결책은 다음과 같습니다.
use 옵션 [autoOpen: false]
$toolTip.dialog("widget").css("visibility", "hidden");
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility", "visible");
대화 상자가 보이지 않는 동안 포커스는 어디에도 설정되지 않고 원래 위치에 유지됩니다.이 기능은 일반 텍스트만으로 툴팁을 사용할 수 있지만, 시작 순간에 대화상자를 볼 수 있도록 하는 것이 중요할 수 있는 더 기능적인 대화상자에는 테스트되지 않습니다.아마 어떤 경우에도 잘 될 겁니다.
원래 게시물은 첫 번째 요소에 초점을 맞추는 것을 피하기 위한 것으로 알고 있지만, 대화 상자가 열린 후(내 코드 후) 포커스가 어디에 있는지 쉽게 결정할 수 있습니다.
IE, FF 및 Chrome에서 테스트했습니다.
이것이 누군가에게 도움이 되기를 바랍니다.
제 생각에 이 솔루션은 매우 좋은 것 같습니다.
$("#dialog").dialog({
open: function(event, ui) {
$("input").blur();
}
});
찾을 수 있음: 제거 불가-자동 포커스-in-ui-대화 상자
저도 비슷한 문제가 있습니다.플루건이 답변에서 보여준 것처럼 유효성 검사가 실패하면 오류 대화 상자를 엽니다.문제는 대화 상자 내부의 어떤 요소도 탭 가능하지 않더라도 대화 상자 자체에 초점이 맞춰진다는 것입니다.다음은 jquery-ui-1.8.23\js\jquery.ui.dialog.js의 원본 미수정 코드입니다.
// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
uiDialog.get()))).eq(0).focus();
댓글은 그들의 것.
이것은 몇 가지 이유로 저에게 정말 안 좋습니다.가장 짜증나는 것은 사용자의 첫 반응이 백스페이스를 쳐서 마지막 문자를 삭제하는 것인데, 대신 백스페이스가 입력 컨트롤 외부에 있기 때문에 페이지를 떠나라는 메시지가 표시된다는 것입니다.
다음과 같은 해결 방법이 저에게 꽤 효과적이라는 것을 알게 되었습니다.
jqueryFocus = $.fn.focus;
$.fn.focus = function (delay, fn) {
jqueryFocus.apply(this.filter(':not(.ui-dialog)'), arguments);
};
저는 다른 문제를 찾고 있었지만 같은 원인을 찾고 있었습니다. 상자가 를 첫 입니다.<a href="">.</a>찾아냅니다. 가 많고 가 나타나면 할 수 .따라서 대화상자에 텍스트가 많고 스크롤 막대가 나타나면 스크롤 막대가 아래쪽으로 스크롤되는 상황이 발생할 수 있습니다.저는 이것이 1인칭 문제도 해결할 수 있다고 생각합니다.다른 사람들도 그렇지만요.
쉽게 이해할 수 있는 간단한 수정.<a id="someid" href="#">.</a>대화 상자의 첫 번째 줄로 표시됩니다.
예:
<div id="dialogdiv" title="some title"> <a id="someid" href="#">.</a> <p> //the rest of your stuff </p> </div>
대화 상자가 시작되는 위치
$(somediv).dialog({ modal: true, open: function () { $("#someid").hide(); otherstuff or function }, close: function () { $("#someid").show(); otherstuff or function } });
위의 내용은 초점이 맞춰지지 않고 스크롤 바가 해당 위치의 맨 위에 유지됩니다.<a>초점을 얻지만 숨겨집니다.따라서 전체적인 효과는 원하는 효과입니다.
이것이 오래된 스레드라는 것을 알고 있지만 UI 문서에 관해서는 이에 대한 해결책이 없습니다.이것은 작동하는 데 흐릿하거나 초점을 맞출 필요가 없습니다.그게 가장 우아한지는 잘 모르겠습니다.하지만 누구에게나 쉽게 설명할 수 있고 말이 됩니다.
Jquery 대화상자 형태의 필드가 하나뿐인 경우 Datepicker가 필요한 필드일 경우 또는 대화상자의 제목 표시줄에 있는 Close(교차) 버튼에 포커스를 설정할 수 있습니다.
$('.ui-dialog-titlebar-close').focus();
호출 AFTER(애프터) 대화 상자가 초기화되었습니다. 예:
$('#yourDialogId').dialog();
$('.ui-dialog-titlebar-close').focus();
은 입니다 입니다..dialog()라고 합니다.
대화 버튼을 사용하는 경우에는 다음을 설정하기만 하면 됩니다.autofocus버튼 중 하나의 속성:
$('#dialog').dialog({
buttons: [
{
text: 'OK',
autofocus: 'autofocus'
},
{
text: 'Cancel'
}
]
});<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="dialog" title="Basic dialog">
This is some text.
<br/>
<a href="www.google.com">This is a link.</a>
<br/>
<input value="This is a textbox.">
</div>저도 똑같은 문제가 생겼어요.
내가 한 해결책은 대화 상자 상단에 더미 텍스트 상자를 추가하는 것입니다.
<input type="text" style="width: 1px; height: 1px; border: 0px;" />
언급한 바와 같이, 이것은 jQuery UI로 알려진 버그이며 비교적 빨리 수정되어야 합니다.그때까지...
다른 옵션이 있으므로 탭 인덱스를 사용할 필요가 없습니다.
대화 상자가 열릴 때까지 일시적으로 날짜 선택기를 비활성화합니다.
dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
"open": function() {$(this).find(".datepicker").datepicker("enable");},
});
저한테는 통합니다.
중복 질문:대화상자에서 첫번째 양식 입력을 흐리게 하는 방법
답변 중 날짜 하려면()focus()대화 상자가 열렸을 때 첫 번째 입력 필드에 포커스를 맞추는 이벤트를 수행합니다.
$('#myDialog').dialog(
{ 'open': function() { $('input:first-child', $(this)).blur(); }
});
비슷한 문제가 있었는데 열린 후 대화에 초점을 맞추어 해결했습니다.
var $dialog = $("#pnlFiltros")
.dialog({
autoOpen: false,
hide: "puff",
width: dWidth,
height: 'auto',
draggable: true,
resizable: true,
closeOnScape : true,
position: [x,y]
});
$dialog.dialog('open');
$("#pnlFiltros").focus(); //focus on the div being dialogued (is that a word?)
하지만 제 경우에는 첫 번째 요소가 앵커라서, 고객님의 경우 데이트 상대를 열어둘 수 있을지 모르겠습니다.
편집: IE에서만 작동합니다.
jquery.ui.js에서 검색
d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(0).focus();
로 대체합니다.
d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(-1).focus();
jQuery 1.9가 출시되었으며 수정 사항은 없는 것으로 보입니다.제안된 방법 중 일부로 첫 번째 텍스트 상자의 초점을 막으려고 시도하는 것은 1.9에서는 작동하지 않습니다.초점을 흐리거나 초점을 이동하려는 방법들은 대화상자에서 이미 초점을 맞추고 더러운 작업을 한 후에 발생하기 때문이라고 생각합니다.
API 문서에는 예상되는 기능 면에서 달라진 것이 없다고 생각하게 만드는 내용이 보이지 않습니다.오프너 단추 추가...
저도 비슷한 문제가 있었습니다.내 페이지에서 첫번째 입력은 jQuery UI 캘린더가 있는 텍스트 상자입니다.두번째 요소는 button입니다.날짜에 이미 값이 있기 때문에 포커스 온 버튼을 설정하지만 우선 텍스트 상자에 흐림 트리거를 추가합니다.이것은 모든 브라우저와 아마도 모든 버전의 jQuery에서 문제를 해결합니다.버전 1.8.2에서 테스트되었습니다.
<div style="padding-bottom: 30px; height: 40px; width: 100%;">
@using (Html.BeginForm("Statistics", "Admin", FormMethod.Post, new { id = "FormStatistics" }))
{
<label style="float: left;">@Translation.StatisticsChooseDate</label>
@Html.TextBoxFor(m => m.SelectDate, new { @class = "js-date-time", @tabindex=1 })
<input class="button gray-button button-large button-left-margin text-bold" style="position:relative; top:-5px;" type="submit" id="ButtonStatisticsSearchTrips" value="@Translation.StatisticsSearchTrips" tabindex="2"/>
}
<script type="text/javascript">
$(document).ready(function () {
$("#SelectDate").blur(function () {
$("#SelectDate").datepicker("hide");
});
$("#ButtonStatisticsSearchTrips").focus();
});
입력에 초점이 있을 때 키보드가 뜨기 때문에 스마트폰과 태블릿에서 이는 매우 중요합니다.이것이 제가 한 일입니다. 디브의 시작 부분에 이 입력을 추가합니다.
<input type="image" width="1px" height="1px"/>
사이즈로 작동하지 않습니다.0px. 진짜 투명한 이미지가 더 좋은 것 같아요..png아니면.gif노력은 안 해봤어요.
아이패드에서 지금까지 잘 작동하고 있습니다.
다음을 추가할 수 있습니다.
...
dlg.dialog({ autoOpen:false,
modal: true,
width: 400,
open: function(){ // There is new line
$("#txtStartDate").focus();
}
});
...
첫 번째 입력으로:<input type="text" style="position:absolute;top:-200px" />
언급URL : https://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox
'source' 카테고리의 다른 글
| 많은 하위 디렉터리를 별도의 새로운 Git 저장소로 분리 (0) | 2023.09.28 |
|---|---|
| PowerShell 오류 메시지에서 touch 명령으로 새 파일 만들기 (0) | 2023.09.28 |
| 팬더를 코드에 적용하려면 언제 사용해야 합니까? (0) | 2023.09.28 |
| 우커머스에서 행당 상품 수 변경 (0) | 2023.09.28 |
| 저장 프로시저는 두 행을 업데이트합니다. (0) | 2023.09.28 |