如何在對話框打開時模糊第一個表單輸入

我有一個顯示錶單的jQuery.dialog。
第一個輸入是<input type="text" class="datepicker" />，我初始化日期選擇器jQuery('.datepicker').datepicker()。如何在對話框打開時模糊第一個表單輸入

問題是，當對話框打開時，它會關注第一個輸入。所以datepicker也打開了。

該對話框的事件open在焦點開始前運行。

那麼，我該如何模糊第一個焦點到datepicker保持隱藏？

來源

2011-03-24 canardman

如前所述，這是一個已知的jQuery UI錯誤，應該儘快修復。在那之前......

這裏的另一種選擇，所以你不必惹的tabindex：

暫時禁用日期選擇器，直到對話框打開：

dialog.find(".datepicker").datepicker("disable"); 
dialog.dialog({ 
    "open": function() {$(this).find(".datepicker").datepicker("enable");}, 
});

對我的作品。

來源

2011-03-24 18:45:10 BMiner

工作正常，比tabindex更好，謝謝。 – canardman 2011-03-25 07:47:42

這是我需要解決我的問題的方向。最後，我還必須在關閉對話框的函數中添加datepicker（「disable」）。這樣可以避免在隨後打開對話框後重新發生問題。 – Khaneliman 2017-03-23 01:16:28

$('.datepicker').blur();

這隻會觸發模糊功能就像一用就會，因此，日期選擇器會躲起來。

問題可能是因爲您已將注意力集中在腳本上第一個元素的某處的文檔加載。所以無論是嘗試並刪除選項，或添加在文檔加載:)

來源

2011-03-24 11:12:48 Val

無法正常工作，重點不是由我設置 – canardman 2011-03-24 13:03:29

重點如何設置？ – Val 2011-03-24 14:26:55

對話框打開時自動。我發現了一個解決方案，我很快就發佈了 – canardman 2011-03-24 14:44:16

我在過去有完全相同的問題，上面一行，我決心像這樣：

function CreateDialog(divWindow) { 
     divWindow.dialog(
      { 
       title: "Generate Voyages", 
       autoOpen: false, 
       modal: true, 
       width: 'auto', 
       height: 'auto', 
       zIndex: -1000, 
       resizable: false, 
       close: function() { 
        $(this).dialog('destroy'); 
        $('#ui-datepicker-div').hide(); 
       },    
        "Cancel": function() { 
         $(this).dialog("close"); 
         $('#ui-datepicker-div').hide(); 
        } 
       } 
      }); 
    } 

function DisplayWindow(divWindow) { 
     divWindow.show() 
     divWindow.dialog("open");     

     var datePicker = $('#ui-datepicker-div'); 

     var textBoxes = $('input[id^="Generate"]'); 

     datePicker.css('z-index', 10000); 

     textBoxes.blur(); 
    }

來源

2011-03-24 11:14:43 Hallaghan

只需添加文本框，在這種情況下，是我的日期選擇器實現的文本框。打開對話框後，只需設置方框的zindex，然後模糊它們。 – Hallaghan 2011-03-24 11:20:25

根據公認的回答here這是帶有jQuery UI「core」的open issue。正如那裏建議的那樣，嘗試將tab索引-1設置爲文本框。

來源

2011-03-24 11:17:53

從jQuery UI的1.10.0開始，你可以選擇通過使用HTML5屬性自動對焦專注於哪個輸入元素。

您只需在對話框中創建一個虛擬元素作爲第一個輸入。它會吸引你的焦點。

<input type="hidden" autofocus="autofocus" />

這已經在Chrome，Firefox和Internet Explorer（所有最新版本）2月7日進行測試，2013年

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

來源

2013-02-07 10:16:58 silkfire

哇，非常有趣的把戲:) – minhajul 2015-10-09 15:53:10

我不得不禁用開幕前的日期選擇器對話框並在打開時啓用它。但是，如果您在關閉時再次禁用它，則問題會在初始打開後重新出現。

$(document).ready(function() { 
    var dialog; 

    $("#date").datepicker(); 
    $("#date").datepicker("disable"); 

    dialog = $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: "auto", 
     width: "auto", 
     modal: true, 
     buttons: { 
      "Create note": function() { 
       $("#noteForm").submit(); 
      }, 
      Cancel: function() { 
       dialog.dialog("close"); 
      } 
     }, 
     open: function() { 
      $("#date").datepicker("enable"); 
     }, 
     close: function() { 
      $("#noteForm")[0].reset(); 
      $("#date").datepicker("disable"); 
     } 
    }); 

    $("#create-note").button().on("click", function() { 
     dialog.dialog('open'); 
     $("#time").focus(); 
    }); 

});

來源

2017-03-23 01:18:38 Khaneliman

如何在對話框打開時模糊第一個表單輸入

回答

相關問題