专注于 bootstrap-tokenfield 输入

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

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

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);
});

它与在焦点表达式上设置最小超时一起工作。

专注于 bootstrap-tokenfield 输入

Focus on bootstrap-tokenfield input

html

javascript

jquery

mousetrap

bootstrap-tokenfield