Установить фокус на тип ввода, скрытый с помощью jQuery

Question

Я пытаюсь реализовать сценарий использования: если кто-то нажимает на .editReason, соответствующее поле ввода должно быть сфокусировано, но по какой-либо причине оно не работает. Может быть, вы знаете, что я делаю не так. Заранее большое спасибо!

HTML:

<ul id="listOfReasons" class="list-group">
   <li class="list-group-item d-flex justify-content-between">
     <span class="reasonStatement flex-grow-1" contenteditable="true">
       <input type="hidden" name="reasonStatement[]" value="test">test</span>
       <span class="editReason px-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
         <i class="fas fa-edit"></i>
       </span>
       <span class="deleteReason">
         <i class="far fa-trash-alt"></i> 
       </span>
   </li>
</ul>

jQuery:

$('#listOfReasons').on('click', '.editReason', function (){
    $(this).siblings('.reasonStatement').find("input[type='hidden'][name^='reasonStatement']").focus()
});

Answer 1

Благодаря вкладу членов stackoverflow я понял, что в концепции есть проблема. Я заменил тип ввода скрытый на textarea, и он работает как положено.

HTML:

<ul id="listOfReasons" class="list-group">
  <li class="list-group-item d-flex justify-content-between"> 
    <textarea class="reasonStatement flex-grow-1 border-0" name="reasonStatement[]">test</textarea>
    <span class="editReason px-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
      <i class="fas fa-edit"></i>
    </span>
    <span class="deleteReason">
      <i class="far fa-trash-alt"></i>
    </span>
  </li>
</ul>

jQuery:

$('#listOfReasons').on('click', '.editReason', function (){
    $(this).siblings('.reasonStatement').focus()
});

Answer 2

Вы не можете сфокусировать <input type="hidden">, но, возможно, вы захотите установить его фокусируемое переключение на type="text", когда даете щелкнуть по значку, а когда вы размыли вход, установите его снова как type="hidden", например так:

$('#listOfReasons').on('click', '.editReason', function () {
  const $input = $(this).siblings('.reasonStatement').find("input[type='hidden'][name^='reasonStatement']")
  $input.prop('type', 'text')
  $input.focus()
});

$('input').on('blur', function () {
  $(this).prop('type', 'hidden')
});

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
        integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="listOfReasons" class="list-group">
    <li class="list-group-item d-flex justify-content-between">
      <span class="reasonStatement flex-grow-1" contenteditable="true">
        <input type="hidden" name="reasonStatement[]" value="test">test</span>
        <span class="editReason px-1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
          <i class="fas fa-edit"></i>
        </span>
        <span class="deleteReason">
          <i class="far fa-trash-alt"></i> 
        </span>
    </li>
 </ul>