如何把重点放在第一输入框在对话框

我有以下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

如何把重点放在第一输入框在对话框

回答

相关问题