Question

当模式出现时，我想重点关注令牌字段输入字段。当前，只有当我单击模式中的输入字段时，它才会聚焦。

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

我尝试添加以下代码

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

我也尝试添加<input autofocus>，但是令牌域初始化时似乎已被覆盖。

我已经检查过bootstrap-tokenfield documentation，但此处并未真正提及输入字段焦点。

有什么建议吗？

Answer 1

您要关注按钮或输入字段吗？您指定的ID用于关注按钮。您提到要重点关注该领域，但似乎并没有要求它。我无法发表评论，但会随着时间的流逝进行编辑。 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();
  });

Answer 2

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

初始化令牌字段后，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);
});

它可以在焦点表达式上设置最小超时。

专注于bootstrap-tokenfield输入

2 个答案: