使用 jQuery 检查输入元素的焦点失败答案

【问题标题】：Checking focus on input element with jQuery fails使用 jQuery 检查输入元素的焦点失败
【发布时间】：2018-01-08 09:47:00
【问题描述】：

当关注下面的输入表单时，我想执行一个 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>

但我就是不让它工作。会很高兴每一个建议。

【问题讨论】：

什么不起作用？你能指望什么？发生了什么？你如何调用你显示的代码？请更新您问题中的 sn-p，使其实际可运行并演示您遇到的问题。
似乎很可能无论您如何调用该代码都会改变焦点（alert 肯定会，但那是在检查之后，所以......），但我们无法帮助您知道你怎么称呼它。
$('#edit-search-block-form--2').is(":focus") 是你需要的。请看这个问题stackoverflow.com/questions/967096/…。当您加载输入未聚焦的页面时，您看不到该工作原因。当您单击它并使其聚焦时为时已晚。 Js 已经运行了。将其包含到观察者或 setInterval 中以查看它。
不，不是。这家伙不知道存在称为事件处理程序的东西。
@connexo 我同意。他应该再调查一下。我刚刚在评论中说的是为什么不起作用的解释。当他点击输入时JS已经通过了，否则选择器是好的：D。添加一个 EventListener 应该可以解决问题：D

标签： javascript jquery forms input

【解决方案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>

【讨论】：

【解决方案2】：

请检查下面的更新代码。

在元素的焦点上运行聚焦函数。

然后我把焦点放在提交按钮上，否则每次关闭alert，焦点都会重新放在输入框上，进入死循环。

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

<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>

【讨论】：

内联事件处理程序是如此 2002。