如何通过位于折叠部分的 Javascript/Jquery 聚焦文本框？

Question

我设计了一个网络表单，其中包含一些问题和文本框/区域，供用户使用单个 HTML table.

输入答案

问题已分类，每个类别都有一个“可点击”的类别标题，因此当点击整个标题时，类别中的问题会折叠或展开。

对某些问题应用了验证，我想在答案无效时“聚焦”到特定的文本框。我可以通过以下方式做到这一点：

if(answer not valid) {document.getElementById('myTextBox').focus();}

但是它只有在类别已经展开时才有效，否则焦点不起作用。

请查看下面 jsFiddle 上的示例。在不输入超过 10 个字母的答案的情况下单击“提交”按钮，只要类别展开，您就会看到它聚焦到文本框。请点击类别标题“项目详细信息”将其折叠，然后再次点击提交按钮，在这种情况下焦点不是很有帮助，因为类别的问题是不可见的。

我想要一个类别 auto-expanded 并且关注相关文本框，但答案无效。如果有多个无效答案，可以关注第一个。任何帮助将不胜感激。

https://jsfiddle.net/Balkanlii/Lt914jvw/2/

Answer 1

您可以在聚焦之前简单地显示文本

$('.clickable').click(function() {
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).nextUntil('tr.clickable').slideToggle(100, function() {});
});

function validate() {
  if (document.getElementById('MainContent_txtProjectTitle').value.length <= 10) {
   $('#trProjectDetails').nextUntil('tr.clickable').show(100);
    document.getElementById('MainContent_txtProjectTitle').focus();
  }
}

tr.clickable {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

  <tr class="clickable" id="trProjectDetails">
    <td>
      <h4>Project Details <span>-</span></h4>
    </td>
  </tr>
  <tr>
    <td>
      <span id="spanQ1">1. Describe the project's outcome in one sentence.</span>
    </td>
  </tr>
  <tr>
    <td>
      <input name="txtProjectTitle" type="text" id="MainContent_txtProjectTitle" placeholder="min. 10 characters" style="width: 10em;">
    </td>
  </tr>

</table><br />
<input type="submit" name="btnSubmit" value="Submit" onclick="return validate();" id="MainContent_btnSubmit">

如何通过位于折叠部分的 Javascript/Jquery 聚焦文本框？

How to focus a textbox via Javascript/Jquery locating in a collapsed section?

javascript

html

jquery

focus