javascript - 使用 jQuery 检查输入元素的焦点失败

Question

当下面的输入表单获得焦点时，我想执行一个 jQuery 函数:

var hasFocus = $("input#edit-search-block-form--2").is(':focus');
if (hasFocus) {
  alert('It is working!');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
  <div>
    <div class="container-inline">
      <h2 class="element-invisible">Search form</h2>
      <div class="form-item form-type-textfield form-item-search-block-form">
        <label class="element-invisible" for="edit-search-block-form--2"></label>
        <input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
      </div>
      <div class="form-actions form-wrapper" id="edit-actions">
        <input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
      </div>
      <input name="form_build_id" value="1234567890abc" type="hidden">
      <input name="form_id" value="search_block_form" type="hidden">
    </div>
  </div>
</form>

但我就是不让它发挥作用。很高兴收到每一个建议。

Answer 1

您需要附加一个事件处理程序来不断检查该输入元素上的 focus 事件。您当前的代码仅执行一次，并且在执行时该元素似乎没有焦点。

$(document).ready(function() {
  $("input#edit-search-block-form--2").on('focus', function() {
    alert('It is working!');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8">
  <div>
    <div class="container-inline">
      <h2 class="element-invisible">Search form</h2>
      <div class="form-item form-type-textfield form-item-search-block-form">
        <label class="element-invisible" for="edit-search-block-form--2"></label>
        <input title="Enter the terms you wish to search for." placeholder=" " id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" type="text">
      </div>
      <div class="form-actions form-wrapper" id="edit-actions">
        <input id="edit-submit" name="submit" value="Search" src="search.svg" class="form-submit" style="display: inline-block;" type="image">
      </div>
      <input name="form_build_id" value="1234567890abc" type="hidden">
      <input name="form_id" value="search_block_form" type="hidden">
    </div>
  </div>
</form>