时间戳

首页 > 解决方案 > 如何通过位于折叠部分中的 Javascript/Jquery 聚焦文本框？

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

问题描述

我设计了一个 Web 表单，其中包括一些问题和文本框/区域，供用户使用单个 HTML 表格输入他们的答案。

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

对某些问题进行了验证，当答案无效时，我想“关注”特定的文本框。我可以通过以下方式做到这一点：

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

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

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

我希望自动扩展一个类别，并且关注相关文本框，其中答案无效。如果有多个无效答案，可以专注于第一个。任何帮助，将不胜感激。

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

标签： javascripthtmljqueryfocus

解决方案

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

$('.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">

推荐阅读