使用jQuery的.focus（）在Mac上的Firefox中设置焦点 [英] Using jQuery's .focus() to set focus in Firefox on a Mac

问题描述

我试图在Mac上使用Firefox（版本33.1.1）来获取 .focus（）。一些类似的问题提到的解决方案的效果是 .focus（）没有视觉效果;在下面的每个测试中，我甚至都无法做到这一点。

下面列出的各种测试全部在Chrome中运行，但不在Firefox中运行。所用的HTML是：

 < input type =textid =testtabindex =1> 
  

设置 tabindex 是基于这个建议，但似乎没有任何效果。

我也考虑过使用 autofocus ，但这不起作用，因为我需要在用户使用网页时操作多个字段的焦点，而不仅仅是加载单个字段。

更新： Rhumborl 建议下方这个问题可能不得不在火狐浏览器使用iframe的时候处理焦点事件，而且确实是这个问题。当您将其从JSFiddle的iframe编辑小提琴窗口中取出时，以下每个测试都能正常工作，而是查看输出的全屏。下面我添加了每个工作全屏版本的链接。

A。 .focus（）

  $（＃test）。focus （）; 
  

小提琴（更新：全屏幕）。

B。 setTimeout 与 .focus（）

  setTimeout（function（）{
 $（＃test）。focus（）; 
}，100）; 
  

小提琴（更新：这在全屏幕中工作）。按照此处的建议，此处和 here 。

C。 .trigger（'focus'）

  $（＃test ）.trigger（ '焦点'）; 
  

小提琴（更新：此作品全部屏幕）。建议此处。

D。 setTimeout with .trigger（'focus'）

 setTimeout（function（）{
 $（＃test）。trigger（'focus'）; 
}，100）; 
  

小提琴（更新：这在全屏幕中工作）。建议此处。

E。 Plain JavaScript

  document.getElementById（test）。focus（）; 
  

小提琴（更新：这在全屏幕）。

F。 setTimeout with plain JavaScript

  setTimeout（'document.getElementById（test ）.focus（）;'，100）
  

小提琴（更新：此功能全屏显示）。按照建议此处。

G。 .select（）

  $（＃test）。select （）; 
  

小提琴（更新：这在全屏幕中工作）。建议此处。

H。 setTimeout 与 .select（）

  setTimeout（function（）{
 $（＃test）。select（）; 
}，100）; 
  

小提琴（更新：这可以在全屏幕）。

这可能是一个Mozilla需要解决的问题（见这里），但似乎有变通办法。例如，如果您在Mac上的Firefox中访问 Google.com ，则重点转到 input 字段（我无法理解Google是怎么做的，尽管他们似乎正在处理这个脚本）。

那么有人知道一个解决方法吗？

解决方案

 < input type =textid =testautofocus =autofocus> 
  

如果将autofocus属性添加到输入中，它可能会执行您正在尝试执行的操作。

I am trying to get .focus() to work in Firefox (version 33.1.1) on a Mac. Some similar questions mentioned solutions that had the effect of .focus() without the visuals; with each of the tests below, I wasn't even able to accomplish that.

The various tests listed out below all work in Chrome but not in Firefox. The HTML used was:

<input type="text" id="test" tabindex="1">

Setting tabindex was based on this suggestion, but it didn't seem to have any effect.

I also considered using autofocus, but that won't work because I need to manipulate the focus of multiple fields as the user uses the webpage, not just for a single field on load.

Update: Rhumborl suggested below that the issue might have to do Firefox's treatment of focus events when using iframes, and sure enough that seems to be the issue. Each of the following tests works when you take it out of JSFiddle's iframe "Edit fiddle" window and instead view the output full screen. Below I've added links to the working full-screen version of each.

A. .focus()

$("#test").focus();

Fiddle (update: this works in full screen).

B. setTimeout with .focus()

setTimeout(function(){
    $("#test").focus();
},100);

Fiddle (update: this works in full screen). As suggested here, here, and here.

C. .trigger('focus')

$("#test").trigger('focus');

Fiddle (update: this works in full screen). As suggested here.

D. setTimeout with .trigger('focus')

setTimeout(function(){
   $("#test").trigger('focus');
},100);

Fiddle (update: this works in full screen). As suggested here.

E. Plain JavaScript

document.getElementById("test").focus();

Fiddle (update: this works in full screen).

F. setTimeout with plain JavaScript

setTimeout('document.getElementById("test").focus();',100)

Fiddle (update: this works in full screen). As suggested here.

G. .select()

$("#test").select();

Fiddle (update: this works in full screen). As suggested here.

H. setTimeout with .select()

setTimeout(function(){
   $("#test").select();
},100);

Fiddle (update: this works in full screen).

This may be an issue that Mozilla is going to need to fix (see here), but there do seem to be workarounds. For example, if you go to Google.com in Firefox on a Mac, focus goes to the input field (I wasn't able to puzzle out how Google was doing it, although they seem to be dealing with focus in this script).

So does anyone know of a workaround?

解决方案

<input type="text" id="test" autofocus="autofocus">

If you add the autofocus attribute to the input it may do what you are trying to do.

这篇关于使用jQuery的.focus（）在Mac上的Firefox中设置焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！