如何将焦点设置到tag-it小部件？

Question

我希望页面加载后，tag-it小部件能够获得焦点。我尝试了各种方法，例如:

<script type="text/javascript">
    $("#myTags").tagit("tagInput").click();
</script>

并且

<script type="text/javascript">
    $("#myTags").tagit("tagInput").focus();
</script>

甚至还有更奇特的东西，比如使用jQuery修改ID并调用。

<script type="text/javascript">
    $("#newIDiTriedToMake").focus();
</script>

我做的任何事情似乎都不能使标签组件获得键盘焦点。我必须通过按Tab键或手动用鼠标单击来开始输入标签。有没有人能给我提示？

- philo vivero

Answer 1

我认为你们两个都是正确的，文档尚未构建完成（因此元素可能不存在），当我试图设置焦点时。然而，我用简单的方法解决了这个问题：编辑源代码。

我只是添加了

this.tagInput.attr('autofocus', 'autofocus');

将焦点放在元素上，无需使用Javascript的好处，可以通过tag-it的_create()方法实现。这很有效。

- philo vivero

---

我尝试了其他提出的解决方案 - 羞愧地说，我没有在原问题中真正提到这些是我已经尝试过的事情。经过一番努力，我的解决方案是我唯一能够使之工作的解决方案，因此我称自己的答案为答案。 - philo vivero

虽然我已经为你的答案点了赞，但请注意'自动对焦'是HTML5中的新功能。 - ron tornambe

尽管我很讨厌将自己的答案标记为正确答案，但最终这是我唯一能够运作的方式，需要注意Ron的警告：这是HTML5。感觉有点遗憾. - philo vivero

Answer 2

我认为你所缺少的是在设置焦点之前构建DOM。如果.tagit("tagInput")引用可聚焦元素。你可以尝试：

<script type="text/javascript">
     $(function() {
        $("#myTags").tagit("tagInput").focus();
    });
</script>

- ron tornambe

---

你能否再详细解释一下这是如何确保在执行工作之前DOM已经完成的？Benjamin的答案可能正确也可能不正确（我还没有尝试过），但他的答案似乎更加自我说明。 - philo vivero

$(function() 相当于 $(document).ready - 它只是一种简写方式。我也喜欢你的“autofocus”解决方案。 - ron tornambe

我尝试使用这个建议来使它工作，看起来这就是我已经在做的事情。你在$(document).ready区域实例化tag-it小部件，所以我的解决方案似乎是唯一可行的。 - philo vivero

Answer 3

当你有一个document.ready时，你应该专注于它：

<script type="text/javascript">
   $(document).ready(function(){
      $("#newIDiTriedToMake").tagit("tagInput").focus();
   })
</script>

- Benjamin de Bos

---

我承认，我将尝试走Ron的路线，因为修改元素的ID被认为是不良实践，直觉上似乎是一个非常糟糕的想法。 - philo vivero

啊哈，我非常确定这不会起作用，因为这正是我所做的。我应该给出代码上下文，但我修改ID并设置焦点的位置在$(document).ready(f(){...})中。 - philo vivero