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" />

[步骤 2] 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

解决了！！！

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

您可以相应地调整时间。

Answer 4

不要忘记输入字段必须首先可见，然后才能对其进行聚焦。

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

Answer 5

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

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

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

Answer 6

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

Answer 7

只有“键盘可聚焦”元素可以用.focus() 聚焦。 div 并不意味着原生可聚焦。您必须向其添加 tabindex="0" 属性才能实现这一点。 input、button、a 等...原生可聚焦。

Answer 8

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

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

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

伴侣

Answer 9

如果在TAB 上调用focus() 按键event.preventDefault 会有所帮助

当我在 .on('keydown') 和 event.keyCode == 9 中使用它时，我无法集中精力工作。我必须添加一个event.preventDefault 以防止浏览器再次切换。

正确代码

$('#goal-input').on("keydown", function (event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '9') { // Keycode for TAB
        $("#name").focus();
        event.preventDefault();
    }
});

代码错误！！！

$('#goal-input').on("keydown", function (event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '9') { // Keycode for TAB
        $("#name").focus();
    }
});

Answer 10

问题是有一个 JavaScript .focus 和一个 jQuery .focus 函数。这个对 .focus 的调用是模棱两可的。所以它并不总是有效。我所做的是将我的 jQuery 对象转换为 JavaScript 对象并使用 JavaScript .focus。这对我有用：

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