将焦点设置为使用jQuery隐藏的输入类型

我试图了解这样一个用例，即如果有人单击

.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>

您无法对

进行对焦，但可能需要在单击图标时将其对焦切换设置为

type=“text”

，并在模糊输入时将其再次设置为

type=“hidden”

，如下所示：

$（“#原因列表”）。在（'click'，'.editReason'，函数（）{
const$input=$（this）.sippines（'.reasonStatement'）.find（“input[type='hidden'][name^='reasonStatement']））
$input.prop（'type'，'text'）
$input.focus（）
});
$（'input'）。在（'blur'，函数（）{
$（this.prop（'type'，'hidden'））
});



测试

您无法对焦
，但您可能希望在单击图标时将其对焦切换设置为
type=“text”
，当您模糊输入时，再次将其设置为
type=“hidden”
，如下所示：


$（“#原因列表”）。在（'click'，'.editReason'，函数（）{
const$input=$（this）.sippines（'.reasonStatement'）.find（“input[type='hidden'][name^='reasonStatement']））
$input.prop（'type'，'text'）
$input.focus（）
});
$（'input'）。在（'blur'，函数（）{
$（this.prop（'type'，'hidden'））
});



测试

多亏了stackoverflow成员的投入，我意识到这个概念中存在一个问题。我用textarea替换了input-type-hidden，它按预期工作

HTML:

多亏了stackoverflow成员的投入，我意识到这个概念中存在一个问题。我用textarea替换了input-type-hidden，它按预期工作

HTML:

如何聚焦不可见的元素？隐藏的输入是不可聚焦的，因为没有什么可聚焦的。你想把数据放在隐藏的输入上吗？这就是你想聚焦的原因？如果不是的话，那么你这样做的目的是什么，我们可能会帮助你这样做。这显然是一个好主意。明白了。谢谢你的快速回答！那么你到底想做什么呢？如何聚焦一个不可见的元素？隐藏的输入是不可聚焦的，因为没有什么可聚焦的。你想把数据放在隐藏的输入上吗？这就是你想聚焦的原因？如果不是的话，那么你这样做的目的是什么，我们可能会帮助你这样做。这显然是一个好主意。明白了。谢谢你的快速回答！那么你到底想做什么呢？非常感谢你的支持。事实上，我觉得我的概念有问题。我不应该使用类型隐藏，而应该使用文本区域。非常感谢您的支持。事实上，我觉得我的概念有问题。我不应该使用类型隐藏，而应该使用文本区域。这并不能回答问题。你可能已经对你的问题有了一个解决方案，但不是问题。这并不能回答问题。你可能已经解决了你的问题，但不是问题。
$('#listOfReasons').on('click', '.editReason', function (){
    $(this).siblings('.reasonStatement').find("input[type='hidden'][name^='reasonStatement']").focus()
});

<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>

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