Question

我使用以下jquery脚本来选择一个 span 有一个类并集中注意力

  <script type="text/javascript">
    $(document).ready(function () {
        $('span').each(function () {
            if ($(this).hasClass('field-validation-error')) {
                $(this).focus();
                $(this).addClass('hello');
            }
        });
    });
</script>

由于某些原因，焦点不会滚动到带有'field-validation-error'类的跨度，尽管它确实将类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>

Answer 1

如果您为HTML提供tabindex属性，则可以专注于非输入元素：

<span tabindex="-1"></span>

-1值使得该元素无法被用户标记，但您可以通过el.focus()

以编程方式对其进行聚焦

除了

在您的实现中，我假设您正在创建验证错误。如果输入字段旁边出现验证错误，为什么不聚焦输入字段而不是范围？这将带来额外的好处，即将用户的光标放在需要修复验证问题的位置，并提供整体更好的用户体验。

Jquery焦点不工作/滚动

1 个答案:

除了