Understand how element focus works with javascript

Question

I'm trying understand how element focus works.

My questions is:-

Does Javascript focus have some limitations? I mean does it have same permissions when it runs from website code and from debug console?
also does focus depends on user action? Because I have code example which I can't understand why it runs like this:-

$('document').ready(function() {

  $('#username').focus();

  $("#username").focus(function() {
    $('.placeholder').hide();
  });

  $('#ss').click(function() {
    $('#username').focus();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="placeholder_input">
  <input type="text" id="username" maxlength="100" />
  <div class="placeholder_container">
    <div class="placeholder">username</div>

    <div id='ss'> damc</div>
  </div>
</div>

Example On JSFiddle

When code starts run it must focus input field and hide text but it not doing this can't understand why? But when I'm making click on text then it makes focus on input field and hides text. Why it can't hide in beginning? Is it some kind of limitation?

You told it to focus before you attached the event listener. Switch those lines around and see what happens — Clive, Dec 13 '16 at 15:41
You need to move `$('#username').focus();` to the end of the `$('document').ready()` function. The `focus` handler has not been set when you call `focus()` the way you're doing it now. — A. Damond, Dec 13 '16 at 15:41
Event handlers are not like declarations - they don't get hoisted to the top of your function. — A. Damond, Dec 13 '16 at 15:42

score 3 · Answer 1 · answered Dec 13 '16 at 15:42

3

You are focusing the element before you bind the event listener. Change the order and it works as planned:

$('document').ready(function() {

  $("#username").focus(function() {
    $('.placeholder').hide();
  });

  $('#ss').click(function() {
    $('#username').focus();
  });
  
  $('#username').focus(); // focus here after your events are bound
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="placeholder_input">
  <input type="text" id="username" maxlength="100" />
  <div class="placeholder_container">
    <div class="placeholder">username</div>

    <div id='ss'> damc</div>
  </div>
</div>

answered Dec 13 '16 at 15:42

Turnip

35,836
15
89
111

yes my bad you are right, but i have second question, why there is no pointer in focused field when focused by itself on load? it is not focused anyway – Dest Dec 13 '16 at 15:45
If you have another question, please ask another question (as in separately) – Clive Dec 13 '16 at 15:46
@Dest When you say _"pointer"_ are you talking about the caret? ie the blinking line that shows where typing will occur? I see this in the input when focused. And what do you mean by _"it is not focused anyway"_? – Turnip Dec 13 '16 at 15:49
yes I'm talking about that, it is not focused for me when code is loaded, thats why I'm asking does it depends on browser? – Dest Dec 13 '16 at 15:50
Hmmm, the code above works fine for me, however the same code in JSFiddle doesn't work in Firefox. Probably related to this: http://stackoverflow.com/questions/7046798/jquery-focus-fails-on-firefox – Turnip Dec 13 '16 at 16:01

Understand how element focus works with javascript

1 Answers1