Jquery焦点不工作/滚动

Jquery focus not working / scrolling

本文关键字：滚动 工作 焦点 Jquery      更新时间：2024-06-19

我正在使用以下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() 以编程方式对其进行聚焦

旁白

在您的实现中，我假设您正在创建验证错误。如果验证错误发生在输入字段旁边，为什么不关注输入字段而不是跨度？这将带来额外的好处，将用户的光标放在需要的位置，以解决验证问题并提供更好的用户体验。

相关文章：