Checking focus on input element with jQuery fails

Question

When below input form is focused, I would like to execute a jQuery function:

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>

But I just don't get it to work. Would be glad for every advice.

***What*** isn't working? What do you expect? What's happening instead? How are you calling the code you've shown? Please update the snippet in your question so it's actually runnable and demonstrates the problem you're having. — T.J. Crowder, Jan 08 '18 at 09:50
Seems pretty likely that however you're calling that code changes the focus (and `alert` certainly will, but that's after the check, so...), but we can't help you without knowing how you're calling it. — T.J. Crowder, Jan 08 '18 at 09:51
$('#edit-search-block-form--2').is(":focus") is what you need . please see this question https://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus . You cannot see that working cause when you load the page the imput is not focused. When you click it and make it focused is too late. Js is already ran. Include that into an watcher or setInterval to see it. — Dinca Adrian, Jan 08 '18 at 09:53
No, it's not. The guy isn't aware that something called event handlers exists. — connexo, Jan 08 '18 at 09:54
@connexo I agree. He should look into that some more. An explanation of why is not working is what I just said in the comment. JS is already passed when he clicks the input, otherwise the selector is good :D. Adding an EventListener should do the trick :D — Dinca Adrian, Jan 08 '18 at 09:58

score 1 · Accepted Answer · answered Jan 08 '18 at 09:51

You need to attach an event handler that keeps checking the focus event on that input element. Your current code executes only once, and at the time of execution the element does seemingly not have 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>

score 0 · Answer 2 · answered Jan 08 '18 at 09:52

Please check the updated code below.

Run the focused function onfocus of the element.

I am then focusing on the submit button, otherwise everytime you close the alert, the focus will be placed on the input box again, and it will go into an infinite loop.

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>

Inline event handlers are so 2002. – connexo Jan 08 '18 at 10:00 — connexo, Jan 08 '18 at 10:00

Checking focus on input element with jQuery fails

2 Answers2