如何把重點放在第一輸入框在對話框

我有以下HTML測試文件，這是我剝奪不必要的標籤從他們如何把重點放在第一輸入框在對話框

dialogTest.htm

<!DOCTYPE> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="../theme/blitzer.css" /> 
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="../js/jquery-ui-1.10.3.custom.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 

      $("#dlg").dialog({ 
       autoOpen: false, 
       resizable: false, 
       modal: true 
      }); 

      $('#button1').click(function() { 
       ChangePassword(); 
      }); 

     }); 

     var loadedByFunction = false; 

     function ChangePassword() { 
      loadedByFunction = true; 
      $("#dlg").dialog('option', { 
       width: 380, 
       height: 300, 
       title: 'Change Password', 
       close: function (event, ui) {} 
      }); 
      $('#dlg').children().attr('src', 'dialogContent.htm') 
      .load(function() { 
       if (loadedByFunction) { 
        loadedByFunction = false; 
        $("#dlg").dialog('open'); 
       } 
      }); 
      return false; 
     } 
    </script> 
</head> 
<body> 
    <div style="display: none"> 
     <div id="dlg"> 
      <iframe src="" ></iframe> 
     </div> 
    </div> 
    <button type="button" name="button1" id="button1" >Change Password</button> 
</body> 
</html>

而且dialogContent.htm

<!DOCTYPE> 
<html> 
<head> 
    <script type="text/javascript"> 
     $(function() { 
      $("input[name='password']").focus(); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <table cellpadding="1" cellspacing="0" border="0"> 
      <tr> 
       <td>Password</td> 
       <td><input type="password" name="password" /></td> 
      </tr> 
      <tr> 
       <td>New Password</td> 
       <td><input type="password" name="password1" /></td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td><input type="password" name="password2" /></td> 
      </tr> 
     </table> 
    </div> 
    <br /> 
    <div align="right"> 
     <input type="submit" name="btnOK" value="Ok" /> 
     <input type="reset" name="btnCancel" value="Cancel" onclick="Close()" /> 
    </div> 
    </form> 
</body> 
</html>

我想把重點放在對話框中的第一個輸入，這沒有發生。實際關注的元素是關閉按鈕（您可以通過按Enter鍵來驗證該關閉按鈕，關閉對話框）

請注意，對話框的內容在iframe之內。通過將html直接插入div標籤，我無法將對話框的內容組合在一起。這兩個頁面都是活動的aspx頁面，不能簡單地組合。實際的對話內容是以上幾個輸入框比較複雜，可以是datebox組合，dropdown，textarea，multiselect，...

請注意，setTimeout沒有工作，要麼是因爲該頁面返回控制對話框等待打開前父母就

問題我如何可以集中精力將焦點移至對話框中第一部分（在這種情況下，輸入密碼）

來源

2013-10-23 AaA

嘗試'$（「＃dlg」）。contents（）。find（'input：first（）'）。focus（）' –

正確的解決方法是設置第一個輸入元素的'autofocus'屬性在像輸入類型=「..」...「...自動對焦/」的HTML＃ –

您還可以檢查另一個話題在這個問題上： http://stackoverflow.com/questions/277544/how-to-set-從 –

我在過去同樣的問題太多，jQuery的焦點移動到對話框中的第一控制，而你的情況變得對對話框頂部的關閉按鈕。由於jQueryUI無法訪問IFRAME的內容，因此無法自動找到您的密碼控制。另一方面，我猜你沒有訪問父對話的內容（跨域可能？）。

我覺得你的問題應該是，如何NOT to focus on first element of the dialog box

我發現這個問題上臨時的解決辦法，但它並不完美。

大約4年前，您可以在提交jQueryUI bug 4731的票上了解這方面的內容。

一個意見建議在主文件中使用下面的代碼（dialogTest.htm）

<script type="text/javascript"> 
    $(function(){ 
     $.ui.dialog.prototype._focusTabbable = function(){}; 
    } 
</script>

此代碼將解除jQueryUI的對話框的焦點移動，你可以像以前一樣使用你的焦點腳本，但你需要一個延遲太。

<script type="text/javascript"> 
    $(function() { 
     setTimeout(moveFocus, 500); 
    }); 

    function moveFocus(){ 
     $("input[name='password']").focus(); 
    } 
</script>

但正如我前面提到的，這段代碼並不完美。延遲應該針對每一頁進行調整，並且再次不會一直工作。

來源

2013-10-24 02:49:56 Bistro

HTML5擁有了一個解決方案：使用自動對焦標籤在文本框中您想要得到聚焦。 http://diveintohtml5.info/forms.html有更多相關信息。如果您不確定目標瀏覽器是否支持自動對焦，則可以在同一頁面上使用回退功能。

來源

2013-10-23 10:02:53 Nzall

謝謝你的回答和評論，你試過我提供的情況嗎？它工作？ – AaA

-1

使用jQuery，您可以按如下做到這一點：

<script type="text/javascript"> 
window.onload = function() { 
    $("input[name='password']").focus(); 
}; 
</script>

或

<script type="text/javascript"> 
$(document).ready(function() { 
    $("input[name='password']").focus(); 
}); 
</script>

來源

2013-10-23 10:02:56

'onload'錯誤，'onready'正確。如果你能告訴我爲什麼，我會給你一個+1 :) – Halcyon

窗口和/或body元素上的加載事件（a.k.a「onload」）將在頁面的所有內容加載完成後觸發。相比之下，jquery的$（document）.ready（...）函數將使用瀏覽器特定的機制來確保在加載和訪問HTML/XML dom後儘快調用處理函數。 –

但是我更喜歡onload準備好:) –

您需要autofocus屬性添加到文本框。

<input type="password" name="password" autofocus="autofocus"/>

來源

2013-10-23 10:03:38 varunvlalan

我在'自動對焦'上找不到任何實質性內容。哪些瀏覽器支持它？ – Halcyon

請查看：http：//www.hscripts.com/tutorials/html5/autofocus-attribute.html – varunvlalan

瀏覽器支持可在以下網址找到：http://diveintohtml5.info/forms.html @nzall – varunvlalan

如何把重點放在第一輸入框在對話框

回答

相關問題