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
– T.J. Crowder, Commented Jan 8, 2018 at 9: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
– T.J. Crowder, Commented Jan 8, 2018 at 9:51
$('#edit-search-block-form--2').is(":focus") is what you need . please see this question stackoverflow.com/questions/967096/… . 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
– Dinca Adrian, Commented Jan 8, 2018 at 9:53
No, it's not. The guy isn't aware that something called event handlers exists. — connexo
– connexo, Commented Jan 8, 2018 at 9: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
– Dinca Adrian, Commented Jan 8, 2018 at 9:58

connexo · Accepted Answer · 2018-01-08 09:51:15Z

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>

Vinod Bhavnani · Accepted Answer · 2018-01-08 09:52:06Z

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>

Collectives™ on Stack Overflow

Checking focus on input element with jQuery fails

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related