Question

我试图将焦点集中到在调用.show（）函数后显示的隐藏div。我尝试了一些东西，包括show（）。focus（）或将其分成

$(".messageDisplayArea").show();
$("#message_display_area").focus();

div显示，但页面没有将焦点转移到它。

<script>
    function showMessage(id, row) {
            selectRow(row);         
            $(".messageDisplayArea").show();        
            $("#message_display_area").focus();
    }

</script>


<div class="messageDisplayArea" id="message_display_area" style="display: none;">

<p> Test Test Test </p>

</div>

我错过了什么？它所在的页面相当大，div显示在页面底部。我希望浏览器跳转并将新的div放在焦点

Answer 1

替换此行：

$("#message_display_area").focus();

这一行：

window.location.hash = "message_display_area";

Answer 2

至于你给我们的代码，你所拥有的东西应该起作用，就像这个小提琴一样。

http://jsfiddle.net/SuERE/

http://jsfiddle.net/SuERE/1/

HTML：

<button type="button">Show and Focus</button>
<div style='height:700px'></div>
<input type="text" id="input" style='display:none;'/>

使用Javascript：

$("button").on("click",function(){
   $("#input").show();
    $("#input").focus();
});

Answer 3

焦点并不意味着您的页面滚动到元素，实际上通常用于表单控件来获取光标。

你需要的是一个 scrollToElement（）函数，它计算你新创建的div的页面偏移量并将页面滚动到那个位置，这里描述一个好的：jQuery scroll to element

Answer 4

您可以做的另一件事是将tabindex属性添加到div元素。这将使focus方法能够执行并找到它并自动移动到它。

<div id="message-display-area" tabindex=1000>...</div>

JSFiddle表明它正常运作。

显示后将焦点设置为div

4 个答案: