When a jQuery UI dialog opens, it selects one of the buttons and highlights it or sets focus to it etc... How can I stop this behaviour so that none of the buttons are highlighted when the dialog opens?
EDIT: I tried the following in the dialog options, which didn't remove focus from the buttons:
...
open:function(event, ui) { $("myunimportantdiv").focus(); },
...
NOTE: As a temporary workaround I modified the CSS for .ui-state-focus but this isn't ideal...
-
See dev.jqueryui.com/ticket/4731. An option will be added to make this configurable in 1.9.cope360– cope3602010年10月27日 15:53:11 +00:00Commented Oct 27, 2010 at 15:53
-
See stackoverflow.com/questions/1202079/… for details of the code that causes this.cope360– cope3602010年10月27日 15:54:38 +00:00Commented Oct 27, 2010 at 15:54
-
[See my solution to prevent jumping focus to jQuery UI Dialog][1] [1]: stackoverflow.com/questions/1202079/…Roc– Roc2012年02月24日 09:52:58 +00:00Commented Feb 24, 2012 at 9:52
13 Answers 13
Use the blur method. You can try this sample.
<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>
thanks for answers, but it seems to me that the best solution (at least for me, minimal code and no unnecessary use of methods on the DOM) is to define your dialog buttons in an array of object :
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")}
}]
The important part to prevent your buttons to get focus is : tabIntex:-1
It is also a convenient and readable way to give id to your buttons.
-
5Not a good idea. This breaks accessibility -- it disables using the tab key to navigate the ui.Vroo– Vroo2013年11月07日 19:53:27 +00:00Commented Nov 7, 2013 at 19:53
-
If you're worried about accessibility (as @Vroo mentions) this answer is still valid if there is only button and it closes the dialog. This way the user can just use the escape key to close it. Just make sure to leave the
closeOnEscapeproperty astrue.Mike– Mike2015年07月05日 07:13:55 +00:00Commented Jul 5, 2015 at 7:13
I had this same problem... Trying to set the focus to another element didn't seem to do the trick for me, but blurring focus from the selected element (in the "open" callback) did:
$('#dialog').dialog
({
open: function ()
{
$('#element-that-gets-selected').blur();
}
});
I suppose a way to prevent focus without specifying a specific name would be to use a selector with first, like this:
$('#dialog').dialog
({
open: function ()
{
$(this).find('select, input, textarea').first().blur();
}
});
-
2I actually used @Ed Saito's code inside the
open:option's function and it worked well. Like: `open: function() { $(".ui-dialog :button").blur(); }JustinP8– JustinP82011年04月08日 19:35:36 +00:00Commented Apr 8, 2011 at 19:35
buttons: [
{
tabIndex: -1,
text: 'Yes',
click: function(){
DeleteStuff();
$(this).dialog('close');
}
},
{
text: 'No',
click: function(){
// Don't delete
$(this).dialog('close');
}
}
]
This is the only way I got it working. tabIndex: -1 is the solution.
Oh, and I wanted to focus on the second button, so my "Delete Item?" confirmation would by default not delete the item.
It's clear focus is causing the jQuery Dialog to scroll to interesting areas when opened. It's referenced just about everywhere now.
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...
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
-
works. Whereas 3-4 other solutions proposed failed. .Razvan_TK9692– Razvan_TK96922020年12月18日 02:48:20 +00:00Commented Dec 18, 2020 at 2:48
This is what I usually do, works all the time:
open: function() {
$('.ui-dialog button').removeClass('ui-state-focus');
},
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>
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 :)
-
This is the only answer on this page that worked for me. Altering the JS did nothing. Thank you!ViaTech– ViaTech2018年06月28日 22:09:03 +00:00Commented Jun 28, 2018 at 22:09
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>
-
How is this helpful? What accessibility functionality does this provide?Agi Hammerthief– Agi Hammerthief2018年01月10日 12:53:54 +00:00Commented Jan 10, 2018 at 12:53
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.
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;
}