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内部调用焦点事件而没有延迟来修复。根据我的理解（例如，来自例如this answer），这会延迟函数直到当前执行队列结束，因此在这种情况下，它会延迟焦点事件，直到转换完成。

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

如果隐藏元素，那么当你以这种方式应用焦点时尝试这样的事情，它不会抛出错误：

$("#elementid").filter(':visible').focus();

使元素可见更有意义，尽管这需要特定于布局的代码。

Answer 5

我发现focus在尝试关注文本元素（例如通知div）时不起作用，但在关注输入字段时确实有效。

Answer 6

解决了！！

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

您可以相应地调整时间。

Answer 7

.focus()只能对“键盘可聚焦”元素进行聚焦。 div并不是本机可聚焦的。您必须为其添加tabindex="0"属性以实现此目的。 input，button，a等是本地可聚焦的。

Answer 8

我的问题是我在站点的“最后一个未禁用的元素”中输入了一个值，并使用选项卡引发了onChange-Event。 之后，没有下一个要获取焦点的元素，因此“浏览器” -Focus切换到浏览器功能（选项卡，菜单等），并且不再位于html内容之内。

要了解这一点，请在html代码末尾放置一个已显示但未禁用的虚拟文本框。 这样，您可以“停放”焦点以供以后替换。 应该管用。就我而言。所有其他尝试均无效，setTimeout-Version也是如此。

检查了大约一个小时，因为它让我发疯了：）

Mätes

Answer 9

如果在 0.0 按键 UPDATE ItemInformation SET Cost = REPLACE(Cost, ',', '.') + 0.0 WHERE INSTR(Cost, ',') 上调用 focus() 会有所帮助

当我在 TAB 和 event.preventDefault 中使用它时，我无法获得焦点。我不得不添加一个 .on('keydown') 以防止浏览器再次使用 Tab 键。

正确的代码

event.keyCode == 9

错误的代码！！！

event.preventDefault

Answer 10

问题在于存在JavaScript .focus和jQuery .focus函数。对.focus的调用是不明确的。因此，它并不总是有效。我要做的是将jQuery对象转换为JavaScript对象并使用JavaScript .focus。这对我有用：

$("#goal-input")[0].focus();