user884424
Reputation: 583
focus() works in IE 9 but not in chrome, firefox
I am trying to set focus on an div with a class using jquery.focus(), It works in IE 9 but not in firefox or chrome.
window.setTimeout(function(){ searchDivToggle(); $('.searchResultsFieldSet').focus();},0);
The page has search form,table with search results, each row has a link to view details, click on link shows details div hiding search form and table, details div has close on click hide details show search and search results.
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>
Upvotes: 0
Views: 886
Answers (1)
David Laberge
Reputation: 16081
The focus() cannot be place on a table element. It needs to be place on input, textarea or select
The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links (). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
You might want to use a scrollTo() element function. There is one example here:
jQuery scroll to element
Upvotes: 1
Related Questions
- javascript focus() not working on Firefox and IE?
- focus doesn't work in IE
- JQuery focus() is not focusing in IE but it is in Chrome
- focus() doesn't working in IE
- jquery focus not working in IE
- Focus working on chrome but not IE
- focus works on IE and Firefox but fail in Chrome
- jQuery focus() not working in FireFox but working in Chrome
- jQuery's '.focus()' not behaving like I'd expect
- focus() not working