blocks|key|341562|text|实际上，只要你不专注于控制台，你给出的专注于这个站点的例子就可以很好地工作。这不起作用的原因很简单，因为它没有从开发控制台窃取焦点。如果您在控制台中运行以下代码，然后在浏览器窗口中快速单击，您将看到它聚焦在搜索框中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341563|setTimeout(function()+{+$('input[name="q"]').focus()+},+3000);|code-block|syntax|javascript|341564|至于你的另一个问题，过去给我带来麻烦的一件事是事件的顺序。不能对尚未附加到DOM的元素调用focus()。您尝试关注的元素是否已附加到DOM？|341565|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Actually the example you gave for focusing on this site works just fine, as long as you're not focused in the console. The reason that's not working is simply because it's not stealing focus from the dev console. If you run the following code in your console and then quickly click in your browser window after, you will see it focus the search box:

<pre><code>setTimeout(function() { $('input[name="q"]').focus() }, 3000);
</code></pre>

As for your other one, the one thing that has given me trouble in the past is order of events. You cannot call focus() on an element that hasn't been attached to the DOM. Has the element you are trying to focus already been attached to the DOM?

blocks|key|123652|text|在网上的其他地方找到了解决方案...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|123653|$('#id').focus();|code-block|syntax|javascript|123654|没有起作用。|123655|$('#id').get(0).focus();|123656|起作用了。|123657|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Found a solution elsewhere on the net...

<pre><code>$('#id').focus();
</code></pre>

did not work.

<pre><code>$('#id').get(0).focus();
</code></pre>

did work.

blocks|key|341654|text|如果你使用bootstrap+%2B+me，这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341655|++$(myModal).modal('toggle');
++$(myModal).on('shown.bs.modal',+function()+{
++++$('#modalSearchBox').focus()
++});|code-block|syntax|javascript|341656|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

if you use bootstrap + modal, this worked for me :

<pre><code> $(myModal).modal('toggle');
 $(myModal).on('shown.bs.modal', function() {
 $('#modalSearchBox').focus()
 });
</code></pre>

blocks|key|341710|text|我也有这个问题。在我的例子中起作用的解决方案是使用HTML元素的tabindex属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341711|我对列表中的一些li元素使用了ng-repeat，但无法使用.focus()将焦点放到第一个li上，所以我只是在循环期间向每个li添加了tabindex属性。|offset|length|style|CODE|341712|所以现在<li+ng-repeat="user+in+users+track+by+$index"+tabindex="{{$index%2B1}}"></li>|341713|%2B1是从0开始的索引。在调用.focus()函数之前，还要确保元素存在于DOM中|341714|我希望这能帮到你。|341715|entityMap^0|0|F|9|0|4|23|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|W|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

I also had this problem. The solution that worked in my case was using the tabindex property on the HTML element.

I was using <code>ng-repeat</code> for some li elements inside a list and I was not able to bring focus to the first li using .focus(), so I simply added the tabindex attribute to each li during the loop.

so now <code>&lt;li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"&gt;&lt;/li&gt;</code>

That +1 was index starts from 0.
Also make sure that the element is present in DOM before calling the .focus() function

I hope this helps.

blocks|key|341600|text|我知道这是旧的，但今天遇到了它。没有一个答案对我有效，我发现有效的是setTimeout。我希望我的关注点放在模式的输入字段上，使用setTimeout+worked。希望这能有所帮助！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341601|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I realize this is old, but came across it today. None of the answers worked for me, what I did find that worked was setTimeout. I wanted my focus to be placed on the input filed of a modal, using the setTimeout worked. Hope this helps!

blocks|key|341758|text|在focus()之前添加一个延迟。200ms就足够了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341759|function+focusAndCursor(selector){
++var+input+=+$(selector);
++setTimeout(function()+{
++++//+this+focus+on+last+character+if+input+isn't+empty
++++tmp+=+input.val();+input.focus().val("").blur().focus().val(tmp);
++},+200);
}|code-block|syntax|javascript|341760|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add a delay before focus(). 200 ms is enough

<pre><code>function focusAndCursor(selector){
 var input = $(selector);
 setTimeout(function() {
 // this focus on last character if input isn't empty
 tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
 }, 200);
}
</code></pre>

blocks|key|341735|text|适用于那些因为使用"$(element).show()“而无法正常工作的用户。我用下面的方法解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341736|+var+textbox+=+$("#otherOption");
+textbox.show("fast",+function+()+{
++++textbox[0].focus();
++});|code-block|syntax|javascript|341737|所以你不需要计时器，它会在show方法完成后执行。|341738|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For those with the problem of not working because you used "$(element).show()". I solved it the next way:

<pre><code> var textbox = $("#otherOption");
 textbox.show("fast", function () {
 textbox[0].focus();
 });
</code></pre>

So you dont need a timer, it will execute after the show method is completed.

blocks|key|341806|text|刚才又遇到了这个问题，信不信由你，我所要做的就是关闭开发工具。显然，Console选项卡的焦点优先于页面内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341807|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Had this issue again just now, and believe it or not, all I had to do was close the developer tools. Apparently the Console tab has the focus priority over the page content.

blocks|key|124031|text|在我的例子中，如果其他人遇到这种情况，我加载一个表单以供查看，用户单击"Edit“，ajax获取并返回值并更新表单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124032|就在这之后，我尝试了所有这些方法，除了：|124033|setTimeout(function()+{+$('input[name="q"]').focus()+},+3000);|code-block|syntax|javascript|124034|我不得不将其更改为(由于ajax)：|124035|setTimeout(function()+{+$('input[name="q"]').focus()+},+**500**);|124036|最后，我使用了$("#q")，尽管它是一个输入：|124037|setTimeout(function+()+{+$("#q").focus()+},+500);|124038|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

In my case, and in case someone else runs into this, I load a form for view, user clicks &quot;Edit&quot; and ajax gets &amp; returns values and updates the form.
Just after this, I tried all of these and none worked except:
<pre><code>setTimeout(function() { $('input[name=&quot;q&quot;]').focus() }, 3000);
</code></pre>
which I had to change to (due to ajax):
<pre><code>setTimeout(function() { $('input[name=&quot;q&quot;]').focus() }, **500**);
</code></pre>
and I finally just used $(&quot;#q&quot;) even though it was an input:
<pre><code>setTimeout(function () { $(&quot;#q&quot;).focus() }, 500);
</code></pre>

blocks|key|124118|text|我遇到了类似的问题，在setTimout函数中包装事件对我来说非常有效。但不知何故，我觉得这不是解决问题的最佳方法(手动延迟事件)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|124119|然而，在我的例子中，焦点事件没有被触发，因为元素是不可见的/隐藏的，结果是元素在几毫秒后是可见的，因为我在element.on("focus")函数中触发了焦点事件(这是当元素被单击并被聚焦时触发的)。|124120|这对我很有效：|124121|element.on("focus",+(e)+=>+{
++e.preventDefault();
++if+(element.is(":visible"))+{
++++search_input.trigger("focus");
++}
});|code-block|syntax|javascript|124122|entityMap^0|B|9|0|1H|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

I faced a similar issue and wrapping the event within <code>setTimout</code> function worked perfectly for me.
But somehow it felt like this wasn't the best approach to resolve it (manually delaying the event).
However, In my case the focus event wasn't triggering as the element was invisible/hidden and it turns out that the element was visible after a few milliseconds as I was triggering the focus event within <code>element.on(&quot;focus&quot;)</code> function (which is a triggered when the element is clicked and the element is focused in).
This worked for me:
<pre class="lang-js prettyprint-override"><code>element.on(&quot;focus&quot;, (e) =&gt; {
 e.preventDefault();
 if (element.is(&quot;:visible&quot;)) {
 search_input.trigger(&quot;focus&quot;);
 }
});

</code></pre>

blocks|key|123935|text|确保元素及其父级可见。不能对隐藏元素使用焦点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|123936|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Make sure the element and its parents are visible.
You cannot use focus on hidden elements

blocks|key|123966|text|职业技巧。如果您想从开发控制台打开焦点，那么只需从options选项卡中将控制台作为单独的窗口打开即可。最新的Firefox和Chrome支持此功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|123967|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Pro tip. If you want to turn on focus from the dev console then just open the console as a separate window from the options tab. The latest Firefox and Chrome supports this feature.

blocks|key|341906|text|我在Chrome的DevTool控制台上测试了代码，focus部分不起作用。后来我发现，只有当我从DevTool运行它时，问题才会出现，如果我将代码实现到网站上，它就能正常工作。实际上，该元素获得了焦点，但DevTool立即将其删除。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341907|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I tested code from Chrome's DevTool Console and the focus part not worked. I found out later the issue is only present if i run it from DevTool and if i implement the code to the website it works fine.
Actually, the element got focused but the DevTool removed it immediately.

blocks|key|341972|text|你可以试试这个id+is+tries|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|341973|window.location.hash+=+'#tries';|code-block|syntax|javascript|341974|entityMap^0|7|2|D|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

You can try this <code>id</code> is <code>tries</code>
<pre><code>window.location.hash = '#tries';
</code></pre>

blocks|key|341785|text|对于我的例子，我必须指定一个选项卡索引(如果只能通过脚本聚焦，则为-1)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|341786|<div+tabindex='-1'>

</div>|code-block|syntax|javascript|341787|entityMap^0|X|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

For my case I had to specify a tab index (<code>-1</code> if only focusable via script)

<pre class="lang-html prettyprint-override"><code>&lt;div tabindex='-1'&gt;
&lt;!-- ... --&gt;
&lt;/div&gt;
</code></pre>

The <a href="http://api.jquery.com/focus/" rel="noreferrer">last example of jQuery's <code>focus()</code> documentation</a> states

<pre><code>$('#id').focus()
</code></pre>

should make the input focused (active). I can't seem to get this working.

Even in the console on this site, I'm trying it for the search box

<pre><code>$('input[name="q"]').focus()
</code></pre>

and I'm getting nothing. Any ideas?

$.focus() not working

状态$('#id').focus()应该使输入成为焦点(活动)。我好像不能让它工作。即使在这个网站的控制台上，我也在搜索框中尝试它$('input[name="q"]').focus()我什么也得不到。有什么想法吗？

问$.focus()不工作
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$.focus()不工作EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$.focus()不工作
EN