我正在使用以下jquery脚本来选择一个有类的span并将其聚焦于
<script type="text/javascript">
$(document).ready(function () {
$('span').each(function () {
if ($(this).hasClass('field-validation-error')) {
$(this).focus();
$(this).addClass('hello');
}
});
});
</script>
由于某些原因,焦点不会滚动到带有类"字段验证错误"的跨度,尽管它确实在元素中添加了类hello。
这个span元素所在的html部分是belwo
<section id="orderreason">
<div class="orderrow backgrounddot">
<ul>
<li class="widenormal">Please tell us the purpose of your request <span class="asterick">*</span><br>
(this information is used for statistical purposes only)</li>
</ul>
<br>
<p>Please tick any that apply:</p>
<div class="checkboxrow">
<input type="checkbox" value="1" name="orderreason"><label>Patient care</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="2" name="orderreason"><label>Health improvement</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="3" name="orderreason"><label>Professional development</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="4" name="orderreason"><label>Personal development</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="5" name="orderreason"><label>Management/service improvement</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="6" name="orderreason"><label>Research</label>
</div>
<p>Other:</p>
<span data-valmsg-replace="true" data-valmsg-for="orderreason" class="field-validation-error">Please choose a reason or enter other text</span>
</div>
</section>
如果您为HTML提供tabindex
属性,则可以将重点放在非输入元素上,如下所示:
<span tabindex="-1"></span>
-1值使元素不能被用户选项卡化,但您可以通过el.focus()
以编程方式对其进行聚焦
旁白
在您的实现中,我假设您正在创建验证错误。如果验证错误发生在输入字段旁边,为什么不关注输入字段而不是跨度?这将带来额外的好处,将用户的光标放在需要的位置,以解决验证问题并提供更好的用户体验。