Сосредоточиться на вводе начальной загрузки

Question

Я бы хотел сфокусироваться на поле ввода токен-поля, когда появится модальное поле.В настоящее время он фокусируется, только если я нажимаю на поле ввода в модале.

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

Я пытался добавить следующий код

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

Я также пыталсядобавьте <input autofocus>, но когда поле токена инициализируется, кажется, что оно переопределено.

Я проверил документацию bootstrap-tokenfield , но фокус поля ввода там на самом деле не упоминается.

Есть предложения?

Answer 1

Я нашел решение проблемы.

после инициализации поля токенов, bootstrap-tokenfield.js добавляет идентификатор ввода с -tokenfield.

Поэтому я добавил следующеекод.

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

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

И это работает с установкой минимального времени ожидания для выражения фокуса.

Answer 2

Хотите ли вы сфокусироваться на кнопке или поле ввода?Указанный вами идентификатор предназначен для фокусировки на кнопке.Вы упоминаете, что хотите сфокусироваться на поле, но не похоже, что вы к нему обращаетесь.Я не могу комментировать, но со временем отредактирую это.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();
  });