focus() 在 javascript 或 jquery 中不起作用答案

【问题标题】：focus() is not working in javascript or jqueryfocus() 在 javascript 或 jquery 中不起作用
【发布时间】：2017-07-16 16:55:35
【问题描述】：

我正在尝试专注于使用 javascript 的输入元素。这是html。

<!DOCTYPE html>
<html>

<head>
  <style>
    input:focus {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <p>Click inside the text fields to see a yellow background:</p>

  <form>
    First name: <input id="abc" type="text" name="firstname"><br>
  </form>

</body>

</html>

当我使用鼠标手动单击时，我可以看到黄色背景。但是当我运行代码 $('#abc').focus() 或 document.getElementById('abc').focus() 时，我看不到黄色背景。如何使用javascript模拟鼠标焦点？

【问题讨论】：

您的代码有效，这里是fiddle 我无法重现该问题
代码正在运行，尝试检查您是否在 javascript 中没有任何语法错误或对 js 文件的路径进行命名空间
如果这是所有代码，那么没有包含 jQuery？
问题可能与 JavaScript 代码运行的时间有关。例如，该 JSFiddle 链接正在运行代码 onLoad。你是如何运行你的代码的？
我在控制台中输入代码。这就是为什么它不起作用。谢谢大家。

标签： javascript jquery

【解决方案1】：

我不知道你做错了什么，但是使用document.getElementById('abc').focus()访问输入元素，我可以看到黄色背景。

const input = document.getElementById('abc');

input.focus();

<!DOCTYPE html>
<html>

<head>
  <style>
    input:focus {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <p>Click inside the text fields to see a yellow background:</p>

  <form>
    First name: <input id="abc" type="text" name="firstname"><br>
  </form>

</body>

</html>

【讨论】：

仅供参考'它有效，还有其他问题'应该是评论，而不是答案。

【解决方案2】：

document.getElementById('abc').focus(); 将在 heml 的 head 部分的 <script> 中输入此行。

或者如果你想用 jQuery 来做，那么你需要把代码放在 document.ready 函数中，如下所示：

$(document).ready(function(){
    $('#abc').focus();
});

【讨论】：

@freedomn-m，你能告诉我怎么做吗？
Ok.1 如果您将该脚本放在head 中，它将在生成正文之前运行（这就是我们在 jquery 中使用 doc.ready 的原因）。所以 1 将不起作用，因为 #abc 元素尚不存在。 2. 您不需要需要将jquery 代码放入doc.ready 中，它会按照1，当它出现在页面中时运行。如果您只在正文末尾放置$('#abc').focus()（没有准备好文档），它仍然可以工作。我们使用 doc.ready 以便代码不依赖于它在正文中的位置。

【解决方案3】：

在这里，您可以正常工作。希望对您有所帮助。

$("#boton").click(function() {
  $("#abc").focus();
});

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

<head>
  <style>
    input:focus {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <p>Click inside the text fields to see a yellow background:</p>

  <form>
    First name: <input id="abc" type="text" name="firstname"><br>
  </form>
  <button id="boton"> Click Me to focus
</button>

</body>

</html>

【讨论】：