如何通过位于折叠部分的 Javascript/Jquery 聚焦文本框?
How to focus a textbox via Javascript/Jquery locating in a collapsed section?
我设计了一个网络表单,其中包含一些问题和文本框/区域,供用户使用单个 HTML table.
输入答案
问题已分类,每个类别都有一个“可点击”的类别标题,因此当点击整个标题时,类别中的问题会折叠或展开。
对某些问题应用了验证,我想在答案无效时“聚焦”到特定的文本框。我可以通过以下方式做到这一点:
if(answer not valid) {document.getElementById('myTextBox').focus();}
但是它只有在类别已经展开时才有效,否则焦点不起作用。
请查看下面 jsFiddle 上的示例。在不输入超过 10 个字母的答案的情况下单击“提交”按钮,只要类别展开,您就会看到它聚焦到文本框。请点击类别标题“项目详细信息”将其折叠,然后再次点击提交按钮,在这种情况下焦点不是很有帮助,因为类别的问题是不可见的。
我想要一个类别 auto-expanded 并且关注相关文本框,但答案无效。如果有多个无效答案,可以关注第一个。任何帮助将不胜感激。
您可以在聚焦之前简单地显示文本
$('.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">
我设计了一个网络表单,其中包含一些问题和文本框/区域,供用户使用单个 HTML table.
输入答案问题已分类,每个类别都有一个“可点击”的类别标题,因此当点击整个标题时,类别中的问题会折叠或展开。
对某些问题应用了验证,我想在答案无效时“聚焦”到特定的文本框。我可以通过以下方式做到这一点:
if(answer not valid) {document.getElementById('myTextBox').focus();}
但是它只有在类别已经展开时才有效,否则焦点不起作用。
请查看下面 jsFiddle 上的示例。在不输入超过 10 个字母的答案的情况下单击“提交”按钮,只要类别展开,您就会看到它聚焦到文本框。请点击类别标题“项目详细信息”将其折叠,然后再次点击提交按钮,在这种情况下焦点不是很有帮助,因为类别的问题是不可见的。
我想要一个类别 auto-expanded 并且关注相关文本框,但答案无效。如果有多个无效答案,可以关注第一个。任何帮助将不胜感激。
您可以在聚焦之前简单地显示文本
$('.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">