我正在尝试使用jquery.focus()
将焦点设置在带有类的div上,它适用于IE 9但不适用于firefox或chrome。
window.setTimeout(function(){ searchDivToggle(); $('.searchResultsFieldSet').focus();},0);
该页面有搜索表单,表格带有搜索结果,每行都有一个查看详细信息的链接,点击链接显示详细信息div隐藏搜索表单和表格,详细信息div已关闭点击隐藏详细信息显示搜索和搜索结果。< / p>
html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showDetails(){
$('#search').toggle();
$('#detailsFragment').css("display","block");
}
function hideDetails(){
$('#search').toggle();
$('#detailsFragment').css("display","none");
$('#searchResults').focus();
}
</script>
</head>
<body>
<div id="search">
<div style="height:50em; width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
Place hodler for search form........
</div>
<div style="border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
<label style=" font-weight: bold;" >Search Results </label>
<table id="searchResults">
<thead>
<td>column1</td>
<td>column2</td>
<td>Action</td>
</thead
<tbody>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="detailsFragment" style="display:none">
<div style="height:50em; width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
Details Fragment
<input type="button" value="Close" onclick="hideDetails();">
</div>
</div>
</body>
答案 0 :(得分:1)
focus()
不能放在table
元素上。它需要放在input
,textarea
或select
焦点事件在获得焦点时发送到元素。此事件隐式适用于有限的元素集,例如表单元素(,等)和链接()。在最近的浏览器版本中,可以通过显式设置元素的tabindex属性来扩展事件以包括所有元素类型。元素可以通过键盘命令(例如Tab键)或通过鼠标单击元素来获得焦点。
您可能想要使用scrollTo()
元素函数。这里有一个例子:
jQuery scroll to element