Когда открывается диалоговое окно jQuery UI, он выбирает одну из кнопок и выделяет ее или фокусирует на ней и т.д. Как я могу остановить это поведение, чтобы ни одна из кнопок не выделялась при открытии диалога?
EDIT: я попробовал следующее в параметрах диалога, которые не удаляли фокус с кнопок:
...
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
Это также удобный и читаемый способ предоставить идентификатор вашим кнопкам.
У меня была эта же проблема... Попытка установить фокус на другой элемент, похоже, не сделала этого трюка для меня, но размытие фокуса с выбранного элемента (в "открытом" обратном вызове):
$('#dialog').dialog
({
open: function ()
{
$('#element-that-gets-selected').blur();
}
});
Я предполагаю, что способ предотвращения фокуса без указания конкретного имени заключается в использовании селектора сперва, например:
$('#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 работает, но нет, если у вас много контента. если кнопка находится в нижней части содержимого, размытие удалит выделение, но оставьте диалог прокручиваемым вниз. используя scrollTop, прокрутил содержимое вверх, но оставил выбранную кнопку. Если пользователь случайно нажал клавишу возврата, кнопка или ссылка будут гореть. Я выбрал комбинацию:
$('#dialog').dialog({
open: function (event, ui){
$('a_selector').blur();
$(this).scrollTop(0);
}
});
работал как чемпион...
Это то, что я обычно делаю, работает все время:
open: function() {
$('.ui-dialog button').removeClass('ui-state-focus');
},
Ну, все решения здесь, похоже, идут с кодом или хаками. Поэтому я отправлю сообщение, которое основано только на переопределении CSS. Меня беспокоило контур, который заставлял кнопку выглядеть как "выбранный", поэтому я просто переопределял ее "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;
}
Вы также можете добавить/переопределить любой другой стиль, который вас беспокоит:)
Основа на ЭД и Лев отвечает, я получил это хорошее решение:
jQuery("#testDialog").dialog({
height: 280,
width: 400,
open: function () {
jQuery(this).closest( ".ui-dialog" ).find(":button").blur();
}
});
Я знаю, что ответ уже выбран, но есть простое решение HTML, которое я нашел здесь давно.
Добавьте следующий код в качестве первого элемента внутри DIV, который вы обозначаете как ваш диалог.
<span class="ui-helper-hidden-accessible"><input type="text" /></span>
Или просто создание фиктивного ввода перед вызовом других кнопок работает так же хорошо. Это работает, потому что пользовательский интерфейс просто ищет первый "вход" в качестве значения по умолчанию, обманув интерфейс пользователя, сначала увидев ложный ввод, фокус перенаправляется.
<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>
Я наткнулся на небольшой взломать, чтобы исправить это, что другие могут оказаться полезными. Такое решение, похоже, работает для меня:
$( "#button" ).click(function() {
// this is a hack to prevent the focus from remaining after a click
$(this).toggle(this.checked);
});
Он просто программно снова устанавливает его, что, похоже, устраняет проблему фокуса.
Просто добавьте эту строку, чтобы удалить функциональность автофокуса:
$.ui.dialog.prototype._focusTabbable = function(){};
Вы можете добавить его в общий файл javascript, и это предотвратит автофокус всех ваших диалогов! Больше не копировать и вставлять во все ваши диалоги
Я мог бы сделать это таким образом. jquery-ui-1.12.0.custom/jquery-ui.css → onuline: нет добавить в строку 896; outline: нет
.ui-widget button {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
outline:none;
}