0

How do I determine the state of a textarea element (:focus, :hover, etc.) in Chrome?

For context, I'm trying to create a web application. After submitting the form on a previous page, the textarea of the new page automatically has the cursor, which I do not want to happen. I've tried to use the jQuery code below, which works in Firefox but not in Chrome:

element = $("#elementID");
if (element.is(":focus")) {
    element.blur();
}

In Chrome, the code does not execute the element.blur() in the if statement (meaning the if statement fails). I've checked with a debugger and the element is successfully returned by the id in Chrome. So I think the problem is the state check statement.

I assume the problem is the element state and I want to investigate the element state at that time, preferably using Chrome developer tools. Unfortunately, I can't figure out how to check the current state. I can only figure out how to check if the state is equal to a specific state.

I've searched around but I am only finding answers like set :hover state which discuss how to set a specific state using Chrome dev tools and not how to determine the current state when it could be any state.

I realize that I could check for each possible state at that point in the JavaScript, but it seems like I am missing the correct way to check the state.

Here is a JSFiddle of my specific case. However, I'd be interested to also hear the answer to the general question about determining the current state of a textarea.

Thanks for the help!

Zack
  • 91
  • 1
  • 5
  • 1
    Sounds like the element is undefined when Chrome hits this. are you using document.getElementById('some-id') to get the element? – Chris Sharp Sep 16 '17 at 13:48
  • Does not go past the if statement? What does that mean? It's hard to answer if you just edit the question to bypass the comments. Then I have to dig through your changes. – Chris Sharp Sep 16 '17 at 13:56
  • Are there errors in your console? Add some debugging messages. – skyline3000 Sep 16 '17 at 13:56
  • @ChrisSharp - thanks for the response. I'm happy to post here as well, just tough to do it all at once haha. I'm using the JQuery ID selection method $("#someID"). The if statement check fails - the element is not in focus even when it has the cursor - so the blur() function is never executed. – Zack Sep 16 '17 at 14:03
  • It looks like @Jon Uleis came up with a good solution. Is that working for you? – Chris Sharp Sep 16 '17 at 14:03
  • @skyline3000 - There are not any errors in the console (well other than the warning that ssl is not enabled on the site and it is asking for a password, but that is because the site is still in development). What debugging messages should I add? I can step through the failing line, I mainly not aware how to check the state of the element. – Zack Sep 16 '17 at 14:06
  • @ChrisSharp - I was able to get the code working correctly. He pointed me to the general problem and I was able to solve it from there. However, I'm interested in the original question I asked about determining the state of a DOM element in Chrome if that is possible. – Zack Sep 16 '17 at 17:31

1 Answers1

1

It's most likely an order of operations issue - the logic is executed before the input's focus can be detected.

I've reproduced the issue here, and fixed it by putting the code into the window .load() event. 

var $el = $('textarea');

// will not execute
if ($el.is(':focus')) {
  $el.blur();
  console.log('outside of window load');
}

// will execute
$(window).load(function() {
  if ($el.is(':focus')) {
    $el.blur();
    console.log('inside window load');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea autofocus></textarea>
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • Thanks! The app is more complex than this, so I'll have to spend some time checking into it. I am adding the textbox using Javascript (along with many other elements in the page) and then trying to unfocus on the textbox. Also, while I appreciate addressing the specific problem in this case, I'm curious about the general question I posted as well, since I think that will provide an approach that will help me in the future more than debugging a specific problem. – Zack Sep 16 '17 at 14:13
  • Ok. So the ordering problem seemed to be the general issue. I've put an example here: https://jsfiddle.net/ZackC/x0vpxLo9/. If you could explain why the ordering problem occurs in this case and give the answer to the general question in the title, I'll give you the check mark (I'd give it you already if I could give out more than one). – Zack Sep 16 '17 at 15:04
  • @jon-ulies meant to tag you in the previous comment. – Zack Sep 16 '17 at 15:11
  • Since this question seems to have died without directly answering my original question, I'll give you the checkmark. Thanks for the help! – Zack Sep 21 '17 at 21:00