提交后将焦点设置在输入元素上
Posted
技术标签:
【中文标题】提交后将焦点设置在输入元素上【英文标题】:Set the focus on input element after submit 【发布时间】:2012-06-18 10:18:31 【问题描述】:我有一个带有一些输入字段的表单。我正在使用 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();
);
此时也无济于事。请帮忙。谢谢!
【问题讨论】:
使用此插件的fiddle 可能会有所帮助:) 【参考方案1】:也许您需要先取消关注其他元素,例如:
$("input").blur(`);
比
$('input.k-input.k-invalid:first').focus();
【讨论】:
【参考方案2】:这应该监听发生的任何提交
$(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
);
现在它将正常发布表单并在返回时将焦点设置在输入上...但是由于它们位于不同的选项卡中,您可能还需要切换回文本框选项卡。
【讨论】:
.on()
上的选择器参数是可选的,所以不需要传递null
。 $(body).on('submit', function() ...);
工作得很好。
我的输入被包裹在 但我正在使用 所以我认为on submit 不会触发。
您能否使用您拥有的新代码更新您的帖子,因为 onSubmit 在单击表单后应该可以工作,您如何提交表单? ajax 发布还是标准方式?
我已经提供了一个基本的例子给你一个起点。
@Mdb 哎呀总是忘记那一点。【参考方案3】:
试试这个
function pageload()
$('#ControlName').focus();
【讨论】:
【参考方案4】:实际上有一个非常简单的聚焦解决方案。 转到输入元素并键入“自动对焦”。就是这样。
<input type="text" id="folderName" name="folderName" autofocus required>
【讨论】:
以上是关于提交后将焦点设置在输入元素上的主要内容,如果未能解决你的问题,请参考以下文章