jquery .focus()无法正常工作的原因是什么？

Question

有些想法是ELEMENT_ID.focus()是在特定时间隐藏的div内部.

这应该是一个容易解决的问题 - 但我正在努力:(

***代码工作正常 - 文本字段没有关注页面加载.

第1步[求助] JAVASCRIPT:

$("#goal-input").focus();

$('#goal-input').keypress(function(event){
 var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == '13') {
etc, etc, etc
}

HTML

<input type="text" id="goal-input" name="goal" />

[STEP2] JAVASCRIPT:

 if (goal) {
          step1.fadeOut('fast', function() {
          step1.hide();
          step2.fadeIn('fast');

etc, etc

HTML:

  <div id="step-2">
        <div class="notifications">
        </div>
        <input type="text" id="name"   name="name" placeholder="Name" />
               <script type="text/javascript">
              $(function(){
              $("#name").focus();
              });
            </script>

为什么第2步不起作用？:(

Answer 1

我在触发焦点转移到页面中的元素(表单输入)时遇到了问题.我发现它可以通过从setTimeout内部调用焦点事件而没有延迟来修复.根据我的理解(例如,从这个答案),这会延迟函数直到当前执行队列结束,因此在这种情况下它会延迟焦点事件直到转换完成.

setTimeout(function(){
    $('#goal-input').focus();
});

Answer 2

如果使用文档加载事件,您需要将代码放在HTML下面或加载:

<input type="text" id="goal-input" name="goal" />
<script type="text/javascript">
$(function(){
    $("#goal-input").focus();
});
</script>

更新:

切换div不会触发文档加载事件,因为所有内容都已加载.切换div时需要关注它:

if (goal) {
      step1.fadeOut('fast', function() {
          step1.hide();
          step2.fadeIn('fast', function() {  
              $("#name").focus();
          });
      });
}

Answer 3

不要忘记输入字段必须首先可见,然后您才能将其聚焦.

$("#elementid").show();
$("#elementid input[type=text]").focus();

Answer 4

这解决了！！！

setTimeout(function(){
    $("#name").filter(':visible').focus();
}, 500);

您可以相应地调整时间。