focus()适用于IE 9但不适用于chrome,firefox

时间:2014-08-20 13:29:19

标签: javascript jquery focus

我正在尝试使用jquery.focus()将焦点设置在带有类的div上,它适用于IE 9但不适用于firefox或chrome。

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

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

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>

1 个答案:

答案 0 :(得分:1)

focus()不能放在table元素上。它需要放在inputtextareaselect

  

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

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

您可能想要使用scrollTo()元素函数。这里有一个例子: jQuery scroll to element