javascript - 提交后将焦点设置在输入元素上

Question

我有一个带有一些输入字段的表单。我正在使用 tabStrip KendoUI 小部件对输入字段进行分组。我正在使用 Kendo 验证器，当提交表单时会触发一些错误消息。问题是，如果带有错误消息的输入字段位于不同的选项卡上，则当前选择的用户将看不到它。我想要完成的是在验证表单时包含第一个输入字段的选项卡，其中包含要选择的错误消息，并且焦点位于该输入字段上。这是一些示例代码:

<script type="text/javascript">
    $("#tabStrip").kendoTabStrip();
</script>

<div id="tabStrip">
    <ul>
        <li class="k-state-active">Master Info</li>
        <li>Developer Info</li>
    </ul>
     <div id="tabStrip-1">
         <div>
            <label for="folderName" class="required">Folder Name:</label>
            <input type="text" id="folderName" name="folderName"  required />
            <span class="k-invalid-msg" data-for="folderName"></span>
        </div>
        <div>
            <label for="afk">Afk:</label>
            <input type="text" id="afk" name="afk" data-bind = "value: Afk" />
        </div>
     </div>
     <div id="tabStrip-2">
         <div>
            <label for="updateFolder" class="required">Update Folder:</label>
            <input type="text" id="Text1" name="updateFolder" class="k-input k-invalid" required />
            <span class="k-invalid-msg" data-for="updateFolder"></span>
        </div>
        <div>
            <label for="age">Age:</label>
            <input type="text" id="age" name="age" class="k-input k-invalid" data-bind = "value: Age" />
        </div>
     </div>
</div>

提交表单验证后，我发现第一个选项卡包含带有错误消息的输入。但是将焦点设置在带有错误消息的第一个元素上不起作用。我怀疑提交后尚未加载输入元素。这是js代码:

if (!omega.validatable.validate()) {
            //Select all the tab strips
            tabs = $("#tabStrip").find('div[id^=tabStrip]');

            var tabStrip = $("#tabStrip").data("kendoTabStrip");
            //Loop through the tab strips looking for an input containing the error class
            for (var i = 0; i < tabs.length; i += 1) {
                if ($(tabs[i]).find('input[class~=k-invalid]').length > 0) {

                    tabStrip.select(i);

                    // Set focus on the first input element with error message
                    $('input.k-input.k-invalid:first').focus();
                    break;
                }
            }
            return false;
        }

使用

 $(document).ready(function () {
    $('input.k-input.k-invalid:first').focus();
 });

此时也无济于事。请帮忙。谢谢!

Answer 1

也许您需要先取消对其他元素的关注，例如:

$("input").blur(`);

比

$('input.k-input.k-invalid:first').focus();