使用jQuery检测输入框焦点状态失败的问题排查

Hey there! Let's sort out why your code isn't triggering that alert when your search input gets focus. Here's what's going wrong and how to fix it:

What's Broken in Your Current Code #

1. jQuery loads after your custom script: Right now, your focus-checking code runs before jQuery is loaded. That means when your script tries to use $, it doesn't exist yet—so the whole thing fails silently (or throws an error in the console).
2. You're only checking focus once: Your code runs immediately when the script is parsed, so it only checks if the input is focused at that exact second (which it almost never is, since the page just loaded). It doesn't listen for when the user actually clicks into the input later.

The Fixed Version #

First, we'll reorder the scripts so jQuery loads first. Then, we'll use jQuery's focus() method to attach an event listener that fires every time the input gains focus. We'll also wrap everything in $(document).ready() to make sure the input element exists before we try to interact with it.

Here's the corrected full code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// Wait for the entire page to load before running our code
$(document).ready(function() {
    // Attach a focus event listener to the search input
    $("#edit-search-block-form--2").focus(function() {
        alert('It is working!');
    });
});
</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>

Quick Breakdown of the Fixes #

• Script Order: jQuery is now loaded before our custom code, so $ is available when we need it.
• $(document).ready(): This ensures our code only runs after all elements on the page are loaded—so we don't try to select the input before it exists in the DOM.
• focus() Event Listener: Instead of a one-time check, this sets up a function that triggers every time the user clicks or tabs into the input—exactly what you wanted!

Bonus: Handle Pre-Focused Inputs #

If you want the alert to also fire if the input is already focused when the page loads (for example, if it's auto-focused), you can add a quick check:

$(document).ready(function() {
    const $searchInput = $("#edit-search-block-form--2");
    
    // Reusable function for the focus action
    function showAlert() {
        alert('It is working!');
    }
    
    // Attach the event listener
    $searchInput.focus(showAlert);
    
    // Check if the input is already focused on page load
    if ($searchInput.is(':focus')) {
        showAlert();
    }
});

That should get everything working as expected!

内容的提问来源于stack exchange，提问作者Madamadam