1

我试图将注意力集中在调用 .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 放在焦点上

4

4 回答 4

2

替换这一行：

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

用这条线：

window.location.hash = "message_display_area";
于 2013-07-08T16:32:17.993 回答
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();
});
于 2013-07-08T16:33:19.417 回答
1

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

您需要的实际上是一个scrollToElement()函数，它计算新创建的 div 的页面偏移量并将页面滚动到该位置，这里描述了一个很好的方法： jQuery scroll to element

于 2013-07-08T16:31:46.643 回答
0

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

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

JSFiddle展示它的工作原理。

于 2013-07-08T16:40:39.920 回答