jquery .focus() 不工作的一些原因是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9596419/
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
What are some reasons for jquery .focus() not working?
提问by dngoo
Some thoughts are that the ELEMENT_ID.focus() is inside divs that are hidden at certain times.
有些想法是 ELEMENT_ID.focus() 位于在某些时候隐藏的 div 内。
This should be an easy problem to solve -- but I'm struggling :(
这应该是一个容易解决的问题——但我很挣扎:(
***code works fine -- the text field isn't being focused on upon page loading up.
*** 代码工作正常 - 页面加载时未关注文本字段。
STEP1 [SOLVED] JAVASCRIPT:
STEP1 [已解决] JAVASCRIPT：
$("#goal-input").focus();
$('#goal-input').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13') {
etc, etc, etc
}
HTML
HTML
<input type="text" id="goal-input" name="goal" />
[STEP2] JAVASCRIPT:
[第2步] JAVASCRIPT：
if (goal) {
step1.fadeOut('fast', function() {
step1.hide();
step2.fadeIn('fast');
etc, etc
HTML:
HTML：
<div id="step-2">
<div class="notifications">
</div>
<input type="text" id="name" name="name" placeholder="Name" />
<script type="text/javascript">
$(function(){
$("#name").focus();
});
</script>
Why doesn't step 2 work? :(
为什么第 2 步不起作用？:(
采纳答案by jgauffin
You need to either put the code below the HTML or load if using the document load event:
如果使用文档加载事件，您需要将代码放在 HTML 下方或加载：
<input type="text" id="goal-input" name="goal" />
<script type="text/javascript">
$(function(){
$("#goal-input").focus();
});
</script>
Update:
更新：
Switching divs doesn't trigger the document load event since everything already have been loaded. You need to focus it when you switch div:
切换 div 不会触发文档加载事件，因为所有内容都已加载。切换div时需要对焦：
if (goal) {
step1.fadeOut('fast', function() {
step1.hide();
step2.fadeIn('fast', function() {
$("#name").focus();
});
});
}
回答by Nick F
I had problems triggering focus on an element (a form input) that was transitioning into the page. I found it was fixable by invoking the focus event from inside a setTimeout with no delay on it. As I understand it (from, eg. this answer), this delays the function until the current execution queue finishes, so in this case it delays the focus event until the transition has completed.
我在触发对正在过渡到页面的元素（表单输入）的关注时遇到问题。我发现它可以通过从 setTimeout 内部调用焦点事件而没有延迟来修复。据我了解（例如从这个答案），这会延迟函数直到当前执行队列完成，所以在这种情况下它会延迟焦点事件直到转换完成。
setTimeout(function(){
$('#goal-input').focus();
});
回答by n0mad
Don't forget that an input field must be visible first, thereafter you're able to focus it.
不要忘记输入字段必须首先可见，然后才能聚焦它。
$("#elementid").show();
$("#elementid input[type=text]").focus();
回答by Mohammed Rishad
This solved!!!
这解决了！！！
setTimeout(function(){
$("#name").filter(':visible').focus();
}, 500);
You can adjust time accordingly.
您可以相应地调整时间。
回答by Kevin B
Try something like this when you are applying focus that way if the element is hidden, it won't throw an error:
当您以这种方式应用焦点时，如果元素被隐藏，请尝试这样的操作，它不会抛出错误：
$("#elementid").filter(':visible').focus();
It may make more sense to make the element visible, though that will require code specific to your layout.
使元素可见可能更有意义，尽管这需要特定于您的布局的代码。
回答by Martin
I found that focusdoes not work when trying to get a focus on a text element (such as a notice div), but does work when focusing on input fields.
我发现这focus在尝试将焦点放在文本元素（例如 notice div）上时不起作用，但在专注于输入字段时起作用。
回答by WegPast
Only "keyboard focusable" elements can be focused with .focus(). divaren't meant to be natively focusable. You have to add tabindex="0"attributes to it to achieve that. input, button, aetc... are natively focusable.
只有“键盘可聚焦”元素可以使用.focus(). div并不意味着本机可聚焦。您必须向其添加tabindex="0"属性才能实现这一点。input, button,a等等... 是本机可聚焦的。
回答by M?tes
The problem in my case was that I entered a value IN THE LAST NOT DISABLED ELEMENT of the site and used tab to raise the onChange-Event. After that there is no next element to get the focus, so the "browser"-Focus switches to the browser-functionality (tabs, menu, and so on) and is not any longer inside the html-content.
我的问题是我在站点的最后一个未禁用元素中输入了一个值并使用选项卡来引发 onChange-Event。之后没有下一个元素获得焦点，因此“浏览器”-焦点切换到浏览器功能（选项卡、菜单等）并且不再位于 html 内容中。
To understand that, place a displayed, not disabled dummy-textbox at the end of your html-code. In that you can "park" the focus for later replacing. Should work. In my case. All other tries didnt work, also the setTimeout-Version.
要理解这一点，请在 html 代码的末尾放置一个显示的、未禁用的虚拟文本框。这样您就可以“停放”焦点以供以后更换。应该管用。就我而言。所有其他尝试都不起作用，setTimeout-Version 也是如此。
Checked this out for about an hour, because it made me insane :)
检查了大约一个小时，因为它让我发疯了:)
M?tes
M?tes
回答by Rodney
The problem is there is a JavaScript .focus and a jQuery .focus function. This call to .focus is ambiguous. So it doesn't always work. What I do is cast my jQuery object to a JavaScript object and use the JavaScript .focus. This works for me:
问题是有一个 JavaScript .focus 和一个 jQuery .focus 函数。这个对 .focus 的调用是模棱两可的。所以它并不总是有效。我所做的是将我的 jQuery 对象转换为 JavaScript 对象并使用 JavaScript .focus。这对我有用：
$("#goal-input")[0].focus();
