javascript 单击按钮后将焦点放在特定的 div 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15338690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make the focus on a particular div after button click
提问by Techy
I am having a form in a page for registering various entertainment programs on a particular stage. After submitting all the details and clicking on submit button, it should check whether a program exists on that stage on the particular day. If any program exists, a div should show the existing program with the full details.My issue is that if any program exists, i need to make the focus on that newly generated div (I mean that div should be visible,no editing is required). I need it because, div is generated with the help of AJAX and the form is so lengthy, so user cannot see the div generated, unless he/she scrolls upward. NB:The div is created in the top position. Is there any way to make the div portion to be visible after form submitting
我在页面中有一个表格，用于在特定舞台上注册各种娱乐节目。提交所有详细信息并单击提交按钮后，应检查特定日期该阶段是否存在程序。如果任何程序存在，一个 div 应该显示现有程序的完整细节。我的问题是，如果任何程序存在，我需要把焦点放在那个新生成的 div 上（我的意思是 div 应该是可见的，不需要编辑）。我需要它，因为 div 是在 AJAX 的帮助下生成的，而且表单很长，所以用户看不到生成的 div，除非他/她向上滚动。注意：div 是在顶部位置创建的。有什么办法可以在表单提交后使div部分可见
采纳答案by Techy
Using the following statement works for me.
使用以下语句对我有用。
document.getElementById('id').scrollIntoView();
回答by Viktor S.
Regularly, you can not focus a div. But if you will add a tabindex to it, it will work:
通常，您不能聚焦 div。但是如果你给它添加一个 tabindex，它就会起作用：
<div tabindex="0">test </div>
Here is a demo:
这是一个演示：
.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>If you click on test button div should became focused and jump into view.
On click I just do something like divElement.focus()
如果您单击测试按钮 div 应该变得聚焦并跳转到视图中。点击我只是做类似的事情divElement.focus()
Another option is just to scroll area which contains your newly added div, like in other answers here.
另一种选择是滚动包含新添加的 div 的区域，就像这里的其他答案一样。
回答by jcubic
You can use code like this to jump to the div
你可以使用这样的代码跳转到div
$(window).scrollTop($('#new_div').offset().top-20)
回答by user2138983
You can scroll to the top of the page with :
您可以使用以下命令滚动到页面顶部：
window.scrollTo(0,0);
or with jQuery using :
或使用 jQuery ：
$('html,body').scrollTop(0);
Or with some fun effect
或者有一些有趣的效果
$('html, body').animate({ scrollTop: 0 }, 'fast');
回答by Chandra Sekhar
<input type="button" onclick="$('#c')[0].focus()" value="test focus" />
<div>
<div id="c" tabindex="1" style="margin-top:800px;">testing</div>
</div>
回答by Michael Sazonov
Try window.scrollTop = #VALUE;
尝试 window.scrollTop = #VALUE;
回答by sudip
var selector = document.getElementById('YOUR_ID_SELECTOR');
if(typeof selector.scrollIntoView !== 'undefined' )
selector.scrollIntoView();
The basic version of the method "scrollIntoView" supports IE8+.
“scrollIntoView”方法的基本版本支持IE8+。
Here is the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
这是文档：https: //developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
