了解元素焦点如何与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

您在绑定事件侦听器之前将元素聚焦。更改订单，并按计划工作：

$('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>