点击按钮后将焦点集中在特定的div上

Question

我在一个页面上有一个表单，用于在特定的舞台上注册各种娱乐节目。填写完所有细节并单击提交按钮后，应检查该特定日期是否在该舞台上存在任何节目。如果存在任何节目，则应显示具有完整详细信息的现有节目div。我的问题是，如果存在任何节目，我需要将焦点放在新生成的div上（我的意思是该div应该可见，无需编辑）。我需要它，因为div是使用AJAX的帮助生成的，并且表单非常长，因此用户除非向上滚动，否则看不到生成的div。 NB：div在顶部位置创建。 是否有办法在表单提交后使div部分可见？

- Techy

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的区域，就像其他答案中所述。

- Viktor S.

---

我已经寻找解决方案有一段时间了，这个完美地解决了我的问题，非常感谢！ - ByteMyPixel

Answer 2

你可以使用类似以下的代码来跳转到该div区块

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

- jcubic

Answer 3

使用以下语句对我来说是有效的。

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

- Techy

---

它给了我一个错误：Uncaught TypeError: 无法读取null的'scrollIntoview'属性。 - harshal

这个在大多数浏览器中缺乏支持：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView - Kris Boyd

它将是 "scrollIntoView" 而不是 "scrollIntoview"（请注意大写的 "V"）。 - sudip

Answer 4

您可以使用以下方式滚动到页面顶部：

window.scrollTo(0,0);

或者使用jQuery：

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

或者加上一些有趣的效果

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

- user2138983

Answer 5

<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.

- Chandra Sekhar

---

很可能被踩是因为缺乏解释并且使用了内联jQuery。我认为这样做是非常不好的实践。这里也没有提到需要使用jQuery。回答JS问题时要小心，不要假设他们正在使用你的库，除非他们确实说了。 - Kris Boyd

Answer 6

尝试使用 window.scrollTop = #VALUE;。

- Michael Sazonov

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

- sudip