focus()适用于ie9,但不适用于chrome, firefox



我试图将焦点放在使用jquery.focus()类的div上,它适用于IE 9,但不适用于firefox或chrome。

window.setTimeout(function(){ searchDivToggle(); $('.searchResultsFieldSet').focus();},0);

页面有搜索表单,表格有搜索结果,每一行都有查看详细信息的链接,点击链接显示详细信息div隐藏搜索表单和表格,详细信息div有关闭点击隐藏详细信息显示搜索和搜索结果。

JSFiddle

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()不能放在table元素上。它需要放置在input, textareaselect

焦点事件在元素获得焦点时发送给元素。此事件隐式地适用于一组有限的元素,例如表单元素(、等)和链接()。在最近的浏览器版本中,可以通过显式设置元素的tabindex属性来扩展事件以包含所有元素类型。元素可以通过键盘命令获得焦点,比如Tab键,或者通过鼠标点击元素。

http://api.jquery.com/focus/

您可能希望使用scrollTo()元素函数。这里有一个例子:jQuery滚动到元素

最新更新