jQuery UI dialog button focus
Jquery UiDialogJquery Ui Problem Overview
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...
Jquery Ui Solutions
Solution 1 - Jquery Ui
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>
Solution 2 - Jquery Ui
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.
Solution 3 - Jquery Ui
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();
}
});
Solution 4 - Jquery Ui
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.
Solution 5 - Jquery Ui
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...
Solution 6 - Jquery Ui
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
Solution 7 - Jquery Ui
This is what I usually do, works all the time:
open: function() {
$('.ui-dialog button').removeClass('ui-state-focus');
},
Solution 8 - Jquery Ui
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>
Solution 9 - Jquery Ui
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 :)
Solution 10 - Jquery Ui
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();
}
});
Solution 11 - Jquery Ui
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>
Solution 12 - Jquery Ui
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.
Solution 13 - Jquery Ui
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;
}