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

Question

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

3

我有一个表单，其中包含一些输入字段。我使用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();
 });

这个阶段不会有帮助，请帮忙。谢谢！

- Mdb

使用这个插件的fiddle可能会很有帮助 :) - AbstractChaos

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Holger D. Schauf · Answer 1

也许你需要先取消其他元素的焦点，例如：

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

比

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

- mehmood · Answer 2

试试这个

function pageload() {
    $('#ControlName').focus();
}

- Abdulhakim · Answer 3

对于焦点，实际上有一个非常简单的解决方案。进入输入元素并键入“autofocus”。就是这样。

<input type="text" id="folderName" name="folderName" autofocus required>

- AbstractChaos · Answer 4

这应该监听任何提交事件

$(body).on('submit',null,function() {
    $('input.k-input.k-invalid:first').focus();
});

或用于更具体的用途。

$('#yourForm').submit(function() {
   $('input.k-input.k-invalid:first').focus();
});

同时，将您的输入内容包裹在<form></form>标签中，否则提交操作将不会被触发。

更新

由于您的表单跨越了多个选项卡，因此您需要将整个表单都包裹在

标签中。

<form id="yourForm" action="submit.php"> //I will discuss action below    
<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> 
</form>

这将对表单按钮的按下做出反应，并确保文本框中的数据也被保留。

如果这是一个静态帖子（即您的 PHP 将返回一个新页面），则需要使用 action 属性，但您也可以将其设置为 ajax 帖子，这意味着您永远不会离开页面，例如。

$('#yourForm').submit(function() {
   $.post('submit.php',$(this).serialize(),function() {
       $('input.k-input.k-invalid:first').focus();
   });

   e.preventDefault(); // stop it from executing the action
});

现在它将像往常一样发布表单，并在返回时将焦点设置在输入框上...但是由于它们位于不同的选项卡中，您可能还需要切换回文本框选项卡。