jQuery UI диалоговое окно кнопка фокус

спасибо за ответы, но мне кажется, что лучшим решением (по крайней мере для меня, минимальный код и отсутствие ненужного использования методов на 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 для ваших кнопок.

у меня была такая же проблема... Попытка установить фокус на другой элемент, похоже, не сделала трюк для меня, но размытие фокуса от выбранного элемента (в "открытом" обратном вызове) сделало:

    $('#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 для прокрутки до интересных областей при открытии. Сейчас на него ссылаются практически везде.

размытие работает, но не если у вас много контента. если кнопка находится в нижней части контента, пятно будет удалить, но оставить окно прокручивается до самого низа. с помощью scrollTop прокрутил содержимое вверх, но оставил кнопку выбранной. Если пользователь случайно нажмет клавишу возврата, кнопка или ссылка будет срабатывать. Я выбрали комбинацию:

$('#dialog').dialog({
    open: function (event, ui){

        $('a_selector').blur();
        $(this).scrollTop(0); 

    }
});

работал как чемпион...

Это то, что я обычно делаю, работает все время:

open: function() {
    $('.ui-dialog button').removeClass('ui-state-focus');
},

Ну, все решения здесь, кажется, идут с кодом или хаки. Поэтому я опубликую свой, который основан только на переопределении CSS. Что меня беспокоило, так это контур, который заставил кнопку выглядеть как "выбранная", поэтому я просто переопределил ее "нет":

.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();
        }
    });

или просто создание фиктивного ввода перед вызовом других кнопок работает так же хорошо. Это работает, потому что пользовательский интерфейс просто ищет первый "вход" по умолчанию, обманывая пользовательский интерфейс, чтобы сначала увидеть ложный ввод, фокус перенаправляется.

<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);                                       
});

Он просто программно устанавливает его снова проверено, что, кажется, проясняет проблему фокуса.

Я знаю, что ответ уже выбран, но есть простое HTML-решение, которое я нашел здесь давно.

добавьте следующий код в качестве первого элемента в DIV, который вы назначаете в качестве диалогового окна.

<span class="ui-helper-hidden-accessible"><input type="text" /></span>

просто добавьте эту строку, чтобы удалить функцию автофокусировки:

$.ui.dialog.prototype._focusTabbable = function(){};

вы можете добавить его в общий файл javascript, и это предотвратит автофокус всех ваших диалогов! Нет больше копировать и вставлять во все ваши диалоги