Поле ввода не фокусируется при нажатии

Question

У меня есть поле <input> внутри div, которое доставляет мне проблемы.

Оно внутри div с позицией absolute.Когда я нажимаю на него, он не получает фокус, поэтому я не могу печатать внутри него.
Другие части поля ввода работают так, как должны: Курсор меняется на символ текста, когда над ним я могу сосредоточитьсяОн щелкает правой кнопкой мыши или клавишей Tab, и когда он ДАЕТ Фокус, я могу печатать на нем обычным образом.

Я даже привязывал к нему журнал консоли при нажатии, просто чтобы убедиться, чтоправильный элемент нажимается.Журнал есть, но он все еще не фокусируется на щелчках.

Кто-нибудь имеет представление о том, что здесь может происходить?

Правка: добавлено больше частей моего кода,извините за такой маленький код раньше.
Вот мой код:

// link that makes the form appear, on another part of the UI
jQuery("#link").on("click", function() {
  jQuery(".form").show()
})

jQuery("#close-button").on("click", function() {
  jQuery(".form").hide()
})
// This was added to test if the click was happening,
// it does not work with or without this
jQuery("#input-field").on("click", function(e) {
  console.log("clicked")
  console.log(e.target) // this is returning the "input-field" element
})

.form {
  background-color: #EAE8E8;
  position: absolute;
  width: 99%;
  right: 0;
  z-index: 100;
  bottom: 0;
  display: none;
  border: 1px solid;
}

#close-button {
  float: right;
  cursor: pointer;
}


/* input-field doesn't have any CSS defined by code yet */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="link">Click to show form</button>
<div class="form">
  <!-- this has position: absolute -->
  <img src="'/close.png" id="close-button">
  <!-- Here are some other images that can be clicked... that all works fine -->
  <input id="input-field" />
  <!-- this is not getting focused when clicked -->
</div>

Answer 1

Вы можете добавить .focus() для автофокусировки желаемого входа.Вот ваш пример:

jQuery("#link").on("click", function() {
  jQuery(".form").show()
  // Add to auto focus your input
  jQuery("#input-field").focus();
})

jQuery("#close-button").on("click", function() {
  jQuery(".form").hide()
})

.form {
  background-color: #EAE8E8;
  position: absolute;
  width: 99%;
  right: 0;
  z-index: 100;
  bottom: 0;
  display: none;
  border: 1px solid;
}

#close-button {
  float: right;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="link">Click to show form</button>
<div class="form">
  <img src="'/close.png" id="close-button">
  <input id="input-field" />
</div>