2012-01-10 4 views
2

У меня возникла проблема заставлять фокус на текстовое поле в содержимом содержимого диалогового окна JQuery, которое динамически генерируется. Я искал эту проблему, и кажется, что если диалог JQuery установлен как модальный, JQuery «крадет» фокус на уровне документа. Честно говоря, я действительно не понимаю, что это значит: P, но если у кого-нибудь будет какое-то решение моей проблемы, это будет оценено. Ниже приведены фрагменты кода моего диалогового окна JQuery.Фокус на текстовое поле В диалоговом окне JQuery не работает

$.post(URI, Params, function(data){ 
    $("<div id='MyModal'></div>").html(data).dialog({ 
     show: "blind", 
     width:1000, 
     height:600, 
     title:"My Modal", 
     resizable: false, 
     modal: true, 
     draggable:false, 
     position:['center','center'], 
     buttons: { 
      "Close": function() { 
       //window.console.log('Close button clicked'); 
       $(this).dialog("close"); 
      }, 
     }, 

     // Onclose callback 
     close:function(){ 
      // Close modal 
          CloseDiaryModal(); 
     } 
     // End onclose callback 
    }) 
    // Add styling to button widgets 
    .dialog("widget") 
    .find(".ui-dialog-buttonset").css({'float': 'left', 'width': '100%'}).end() 
    .find(".ui-dialog-buttonset button") 
    .eq(0).css({'float': 'left', 'margin-left': '10px'}).end() 
    .eq(0).attr('id', 'CloseBtn').end() 
}) 
.complete(function() {  
      // Set focus 
    $("#SearchField").focus(); 
}); 
// End modal function 

Я попытался добавить следующие параметры, но его все еще не работает. ATM, вы можете видеть, что курсор мерцает около 1 секунды, а затем он теряет фокус. Не могу понять, почему это происходит. Спасибо и надеюсь, что кто-то может мне помочь.

focus:function(event, ui) { 
     $("#SearchLastName").focus(); 
}, 
open:function(event, ui) { 
    $('#SearchLastName').focus(); 
}, 

ответ

0

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

$('some selector').dialog({ 
    bgiframe: true, 
    open: function() { 
     $('./*your element*/'.focus(); 
    }, 
    beforeclose: function(event, ui) { /* your code */ } 
}); 

Это удостоверится только попытаться выполнить фокусировку уже после открытия диалогового окна.

+0

Возможно, вы пропустили мое последнее изменение, когда вы разместили это. Во всяком случае, как вы можете видеть по моему отредактированному вопросу, я пробовал использовать оба варианта «открыть» и «фокус», и я попытался добавить заданный код фокуса в событие POST «complete», но ничего не работает. Как я уже сказал, вы можете видеть, что курсор мигает в течение секунды, но затем он теряет фокус. – asyadiqin

+0

Право - ну могли бы вы разместить пример, может быть, с http://jsfiddle.net/? – danbgray

+0

Я никогда не использовал jsfiddle.net раньше и понятия не имею, как его использовать. Плюс оригинальные коды довольно сложны для меня, чтобы узнать, какую часть извлечь для использования в jsfiddle.net. Любой другой способ помочь мне? – asyadiqin

0

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

Если это так, либо удалить отключенный атрибут следующим образом:

jQuery('#<form-id>').dialog({ 
    open: function(event, ui) { 
     jQuery('#<input-id>').removeAttr('disabled').focus(); 
    } 
}); 

... или избежать отключения поля формы в вопросе.

Смежные вопросы