Question

我在一个页面中有一个表格，用于在特定舞台上注册各种娱乐节目。提交所有详细信息并单击“提交”按钮后，应检查特定日期该阶段是否存在某个程序。如果存在任何程序，div应该显示现有程序的完整细节。我的问题是，如果存在任何程序，我需要关注新生成的div（我的意思是div应该是可见的，不需要编辑）。我需要它，因为div是在AJAX的帮助下生成的，并且表单非常冗长，因此用户无法看到生成的div，除非他/她向上滚动。注意：div创建在顶部位置。有什么办法可以在表单提交后使div部分可见

Answer 1

通常，你不能集中一个div。但是如果你要添加一个tabindex，它就会起作用：

<div tabindex="0">test </div>

这是一个演示：

.z{margin-top:800px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="$('.z')[0].focus()" value="test" />
<div>
    <div class="z" tabindex="0">test </div>
</div>

如果单击测试按钮div应该聚焦并跳转到视图中。点击后我就会执行divElement.focus()

之类的操作

另一种选择只是滚动包含新添加的div的区域，就像这里的其他答案一样。

Answer 2

你可以使用这样的代码跳转到div

$(window).scrollTop($('#new_div').offset().top-20)

Answer 3

您可以滚动到页面顶部：

window.scrollTo(0,0);

或jQuery使用：

$('html,body').scrollTop(0);

或者带来一些有趣的效果

$('html, body').animate({ scrollTop: 0 }, 'fast');

Answer 4

<input type="button" onclick="$('#c')[0].focus()" value="test focus" />
<div>
    <div id="c" tabindex="1" style="margin-top:800px;">testing</div>
</div>

jsfiddle example.

Answer 5

尝试window.scrollTop = #VALUE;

Answer 6

使用以下声明适合我。

document.getElementById('id').scrollIntoView();

Answer 7

var selector = document.getElementById('YOUR_ID_SELECTOR');

if(typeof selector.scrollIntoView !== 'undefined' )
    selector.scrollIntoView();

方法“ scrollIntoView”的基本版本支持IE8 +。

以下是文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

按下按钮后，将焦点放在特定的div上

7 个答案: