【发布时间】：2016-05-23 23:25:29
【问题描述】：
我正在尝试使用jquery.focus() 将焦点放在具有类的 div 上，它适用于 IE 9，但不适用于 firefox 或 chrome。
window.setTimeout(function(){ searchDivToggle(); $('.searchResultsFieldSet').focus();},0);
页面有搜索表格，表格有搜索结果，每一行都有一个查看详情的链接，点击链接显示详情div隐藏搜索表格和表格，详情div点击关闭隐藏详情显示搜索和搜索结果。
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>
【问题讨论】：
-
您认为将注意力集中到一张桌子上会怎样？它不是交互式元素，您可以关注的元素是按钮、链接和表单输入等。
-
也许你需要滚动到表格而不是触发
focus事件。
标签： javascript jquery focus