尝试通过程序设置焦点在Firefox浏览器中不起作用

Question

我在使用Firefox浏览器时，尝试使用jQuery JavaScript将焦点设置到控件上遇到了问题。虽然我的具体问题相当复杂，但即使是下面的简单测试用例也不能解决我的问题。找到了输入框，改变了它的值，但是输入框没有获得焦点。
此问题仅出现在Firefox浏览器中。

在Windows 7上尝试了Firefox 44.0.2版本，但在MS IE 10和Chrome中可以正常工作。

$().ready(function() {
  $("#I").val(3);
  $("#I").focus(); // JQuery focus - does not work
  
  var ctl = document.getElementById('I')
  ctl.value='DOM';
  ctl.focus(); // DOM Native focus - does not work
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type=text id=I>

- edc65

---

在你的问题片段中对我有效！ - Praveen Kumar Purushothaman

@PraveenKumar 我现在正在不同的浏览器中尝试这段代码片段。在火狐浏览器中失败了。你试过用...吗？ - edc65

我知道。尝试使用 $(document).ready( 呢？ - Praveen Kumar Purushothaman

函数已经被调用，值已经被设置。只是焦点的问题。 - edc65

太好了...请看下面的答案。 - Praveen Kumar Purushothaman

在Mac上适用于FF45。 - Kaiido

Answer 1

这种类型的ready事件：

$().ready(function() {

很久以前就已经被弃用，最好不要使用。

---

您可以使用autofocus属性：

$(document).ready(function() {
  $('#I').val(3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text id=I autofocus>

而不是使用jQuery，尝试触发DOM .focus()事件：

$(document).ready(function() {
  $('#I').val(3);
  $('#I')[0].focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text id=I>

- Jai

---

“autofocus” 属性被低估和几乎未知。好建议。 - Anders Marzi Tornblad

正如我所写的：“我的具体问题非常复杂”，我需要集中精力在特定的时刻，自动对焦是无用的。 - edc65

在这种情况下，您可以尝试使用.focus() DOM事件。 - Jai

你是指DOM的focus方法吗？我会尝试。 - edc65

谢谢提示，我尝试了DOM焦点方法。同样的问题。这真的是Firefox的问题。 - edc65

关于这段代码片段：它是一个简化的例子！我们讨论的不是 ready 事件的样式 - 请注意（然后：不，它根本没有被弃用。https://api.jquery.com/jQuery/#jQuery3） - edc65

Answer 2

我认为在Firefox上设置焦点存在问题，有一种解决方法是使用focusout。请参见下文：

$().ready(function() {

    $('#I').val(3);

    $('#I').focusout(function() {
        setTimeout(function() {
            $(this).focus();
        }, 0);
    });

    $('#I').focus();

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="I" />

- Donal

---

它在FF45 Mac上设置输入的焦点，可能需要一些setSelectionRange()。 - Kaiido

@Kaiido 如果你想选择输入框中的内容，那当然可以，但是 OP 可能想把焦点设置到输入框，因为它里面没有任何东西。 - Donal

或者他可能想要在输入之前加上前缀，让用户填写后面的内容，就像OPost一样。然后将插入符号设置在输入的末尾更方便，这就是setSelectionRange有用的地方，不仅可以选择一些文本;-) - Kaiido