javascript - 了解元素焦点如何与 JavaScript 配合使用

Question

我正在尝试了解元素焦点是如何工作的。

我的问题是:-

1. Javascript 焦点有一些限制吗？我的意思是，当它从网站代码和调试控制台运行时，它是否具有相同的权限？

2. 焦点是否也取决于用户操作？因为我有代码示例，我无法理解为什么它会这样运行:-

$('document').ready(function() {

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

  $("#username").focus(function() {
    $('.placeholder').hide();
  });

  $('#ss').click(function() {
    $('#username').focus();
  });

});

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

<div class="placeholder_input">
  <input type="text" id="username" maxlength="100" />
  <div class="placeholder_container">
    <div class="placeholder">username</div>

    <div id='ss'> damc</div>
  </div>
</div>

示例 JSFiddle

当代码开始运行时，它必须聚焦输入字段并隐藏文本，但它没有这样做，不明白为什么？但是，当我单击文本时，它会将焦点放在输入字段上并隐藏文本。为什么一开始就隐藏不了？这是某种限制吗？

Answer 1

在绑定(bind)事件监听器之前，您正在聚焦该元素。更改顺序，它按计划运行:

$('document').ready(function() {

  $("#username").focus(function() {
    $('.placeholder').hide();
  });

  $('#ss').click(function() {
    $('#username').focus();
  });
  
  $('#username').focus(); // focus here after your events are bound
  
});

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

<div class="placeholder_input">
  <input type="text" id="username" maxlength="100" />
  <div class="placeholder_container">
    <div class="placeholder">username</div>

    <div id='ss'> damc</div>
  </div>
</div>