尝试以编程方式设置焦点不适用于 Firefox

Trying to set focus programmatically does not work with Firefox

本文关键字：焦点 不适用 适用于 Firefox 设置 方式 编程      更新时间：2023-09-26

我在 Firefox 中尝试使用 jqueryjavascript 将焦点设置为控件时遇到了问题。虽然我的特定问题非常复杂，但即使是下面的简单测试用例也不适合我。找到输入，更改其值，但未聚焦输入。
问题仅存在于火狐

浏览器

在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>

这种就绪事件风格： 

$().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>

我相信

在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" />

相关文章：