jQuery UI 대화 버튼 포커스
jQuery UI 대화 상자가 열리면 단추 중 하나를 선택하여 강조 표시하거나 포커스를 설정합니다. 대화 상자가 열릴 때 단추가 강조 표시되지 않도록이 동작을 어떻게 중지 할 수 있습니까?
편집 : 버튼에서 포커스를 제거하지 않은 대화 상자 옵션에서 다음을 시도했습니다.
...
open:function(event, ui) { $("myunimportantdiv").focus(); },
...
참고 : 임시 해결 방법으로 CSS를 수정 .ui-state-focus했지만 이상적이지 않습니다.
흐림 방법을 사용하십시오. 이 샘플을 시도해 볼 수 있습니다.
<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>
답변 주셔서 감사합니다. 그러나 가장 좋은 해결책은 (적어도 저에게는 최소한의 코드와 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를 부여하는 편리하고 읽기 쉬운 방법이기도합니다.
나는이 같은 문제가 있었다 ... 다른 요소에 포커스를 설정하려고 시도하는 것은 나에게 트릭을 수행하지 않는 것 같았지만 선택한 요소 ( "open"콜백에서)에서 포커스를 흐리게 처리하면 다음과 같이됩니다.
$('#dialog').dialog
({
open: function ()
{
$('#element-that-gets-selected').blur();
}
});
특정 이름을 지정하지 않고 포커스를 방지하는 방법은 다음과 같이 first와 함께 선택기를 사용하는 것입니다.
$('#dialog').dialog
({
open: function ()
{
$(this).find('select, input, textarea').first().blur();
}
});
buttons: [
{
tabIndex: -1,
text: 'Yes',
click: function(){
DeleteStuff();
$(this).dialog('close');
}
},
{
text: 'No',
click: function(){
// Don't delete
$(this).dialog('close');
}
}
]
이것이 내가 작동하게하는 유일한 방법입니다. tabIndex : -1 이 솔루션입니다.
아, 두 번째 버튼에 집중하고 싶었 기 때문에 "항목을 삭제 하시겠습니까?" 확인은 기본적으로 항목을 삭제하지 않습니다.
분명한 초점은 jQuery 대화 상자를 열 때 흥미로운 영역으로 스크롤하는 것입니다. 이제 거의 모든 곳에서 참조됩니다.
blur works, but not if you have a lot of content. if the button is at the bottom of the content, blur will remove the selection, but leave the dialog scrolled to the bottom. using scrollTop scrolled the content to the top, but left the button selected. If a user accidentally hit the return key, the button or link would fire. I chose a combination:
$('#dialog').dialog({
open: function (event, ui){
$('a_selector').blur();
$(this).scrollTop(0);
}
});
worked like a champ...
This is what I usually do, works all the time:
open: function() {
$('.ui-dialog button').removeClass('ui-state-focus');
},
Well, all solutions here seems to go with code or hacks. So I'll post mine, that is based just in CSS override. What bothered me was the outline that made the button look as "selected", so I simply overrided it with "none":
.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;
}
You can also add/override any other style that is bothering you :)
Base on ED and Lev's answers, I got this good solution:
jQuery("#testDialog").dialog({
height: 280,
width: 400,
open: function () {
jQuery(this).closest( ".ui-dialog" ).find(":button").blur();
}
});
I know the answer has already been selected, but there is a simple HTML solution that I found here a long time ago.
Add the following code as the first element inside the DIV you designate as your dialog.
<span class="ui-helper-hidden-accessible"><input type="text" /></span>
Or, simply creating a dummy input before calling the other buttons works just as well. This works because the UI simply looks for the first "input" as the default, by tricking the UI into seeing a false input first, the focus is redirected.
<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>
I stumbled upon a little hack to fix this that others may find useful. A solution like this seems to work for me:
$( "#button" ).click(function() {
// this is a hack to prevent the focus from remaining after a click
$(this).toggle(this.checked);
});
It simply programmatically sets it checked again, which seems to clear up the focus issue.
Just add this line to remove the autofocus functionality:
$.ui.dialog.prototype._focusTabbable = function(){};
You can add it in a shared javascript file and it will prevent autofocus of all your dialogs! No more copy and paste in all your dialogs
I could do this in this way. jquery-ui-1.12.0.custom/jquery-ui.css -> onuline:none add on 896 line ouline:none
.ui-widget button {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
outline:none;
}
참고URL : https://stackoverflow.com/questions/1793592/jquery-ui-dialog-button-focus
'IT TIP' 카테고리의 다른 글
| ReactJS에서 클릭 이벤트를 수동으로 트리거하는 방법은 무엇입니까? (0) | 2020.12.11 |
|---|---|
| 플랫 번들링이란 무엇이며 롤업이 Webpack보다 더 나은 이유는 무엇입니까? (0) | 2020.12.11 |
| 다른 방법은 없습니다. (0) | 2020.12.11 |
| Android : '위치'유형의 변수를 초기화하는 방법 (null과 동일하게 만드는 것 제외) (0) | 2020.12.11 |
| : 레일 route.rb에서와 같이 (0) | 2020.12.11 |