专注于 bootstrap-tokenfield 输入答案

【问题标题】：Focus on bootstrap-tokenfield input专注于 bootstrap-tokenfield 输入
【发布时间】：2018-10-02 13:08:03
【问题描述】：

当模态出现时，我希望将注意力集中在令牌字段输入字段上。目前，仅当我单击模式中的输入字段时才会聚焦。

https://jsfiddle.net/csisanyi/h19Lzkyr/12/

我尝试添加以下代码

    Mousetrap.bind('w', function() { 
  document.getElementById("keywordButton").click();
  document.getElementById("keyword-input").focus();
  });

我也尝试添加<input autofocus>，但在初始化令牌字段时，它似乎被覆盖了。

我检查了bootstrap-tokenfield documentation，但那里并没有真正提到输入字段焦点。

有什么建议吗？

【问题讨论】：

标签： javascript jquery html bootstrap-tokenfield mousetrap

【解决方案1】：

您希望将焦点放在按钮上还是输入字段上？您指定的 ID 用于关注按钮。您提到希望该领域集中注意力，但您似乎并没有要求它。我不能制作 cmets，但会随着时间的推移对其进行编辑。 HTML：

<div class="modal-body">
    <p class="modal_text">Add keywords.</p>
    <input class="token-input input-group-lg keywordmodalclass" id="keyword-input" type="text" name="keywords" value="" placeholder="Keywords">
</div>
<div class="modal-footer">
    <button id="saveKeyword" type="submit" class="btn btn-success" onclick="submitKeywords()">Save Keywords</button>

jquery：

 Mousetrap.bind('w', function() { 
      document.getElementById("keywordButton").click();
      document.getElementById("keyword-input").focus();
  });

【讨论】：

【解决方案2】：

我找到了解决问题的办法。

tokenfield 初始化后，bootstrap-tokenfield.js 将输入的 id 附加到-tokenfield。

所以我添加了以下代码。

https://jsfiddle.net/csisanyi/h19Lzkyr/43/

Mousetrap.bind('w', function() { 
  document.getElementById("keywordButton").click();
  setTimeout(() => {
          document.getElementById("keyword-input-tokenfield").focus();
        }, 400);
});

它适用于在焦点表达式上设置最小超时。

【讨论】：