1

I would like to have focus on the tokenfield input field when the modal shows up. Currently it's focused only if I click on the input field in the modal.

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

I tried to add the following code

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

I also tried to add <input autofocus> but when the tokenfield is initialized it seems like it's overriden.

I have checked the bootstrap-tokenfield documentation but input field focus is not really mentioned there.

Any suggestions?

4

2 回答 2

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>

查询：

 Mousetrap.bind('w', function() { 
      document.getElementById("keywordButton").click();
      document.getElementById("keyword-input").focus();
  });
于 2018-10-02T13:22:35.203 回答
0

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

初始化 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);
});

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

于 2018-10-04T13:34:31.777 回答