Question

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

我的问题是： -

Javascript焦点是否有一些限制？我的意思是它从网站代码和调试控制台运行时是否具有相同的权限？
焦点还取决于用户操作吗？因为我有代码示例，我无法理解为什么它运行如下： -

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

了解元素焦点如何与javascript一起使用

1 个答案: