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事件。您当前的代码仅执行一次，并且在执行时元素看起来似乎没有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>

Answer 2

请检查下面的更新代码。

运行元素的聚焦函数onfocus。

然后我专注于提交按钮，否则每次关闭提醒时，焦点将再次放在输入框上，并且会进入无限循环。

＆＃13;

function focused(){
  alert('It is working!');
  $('#edit-submit').focus();
}

＆＃13;

<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" onfocus="focused()" 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>

＆＃13;

使用jQuery检查对input元素的关注失败

2 个答案: