Focus setting on input element after display setting: block
I have HTML on the following lines:
<div class="hiddenClass"> // this implies display:none
<span>
<input type="text" id="hiddenInput"/>
</span>
</div>
and a Javascript event (triggered by the "succes" method of jQuery's $ .ajax () call) that should make this div visible and then set focus to the control. Something like:
this.DOMElements.divElement.className="showClass"; //a CSS class with display:block;
this.DOMElements.hiddenInputElement.focus();
this.DOMElements.hiddenInputElement.select();
strange enough, this code only works part of the time. In some cases (only sometimes !!) the focus / select commands generate focus / select warnings about an invisible control. The control will be visible, but focus will not be moved and no text will be selected.
I found a (somewhat) solution by moving the focus / selection code in a separate function and delaying it with
this.DOMElements.divElement.className="showClass"; //a CSS class with display:block;
setTimeout("focusinput('hidddenInput')",1);
Ok, finally my question is, since javascript is single threaded .. how is the delay between the time I made the parent div visible and the time when I can set focus / selection on the child input? How can this be a race condition?
Edit: Happens in IE8
source to share
If you are using jQuery use this to display and set focus:
$(".hiddenClass").fadeIn("fast",
function() {
$("#hiddenInput").focus();
}
);
or
$(".hiddenClass").show(0,
function() {
$("#hiddenInput").focus();
}
);
If you want to show it without any changes.
Basically it fades away the hidden div (you can replace .hiddenClass with id if you want some specific div to be shown and not all elements with .hiddenClass) and after that it executed a callback function to give focus at the entrance.
This way you won't try to give input focus until the div is fully displayed.
source to share
Ok, finally my question is, since javascript is single threaded .. how is the delay between the time I made the parent div visible and the time when I can set focus / selection on the child input?
You just answered your own question: This is because JS is single threaded; that is, it blocks the browser from updating its rendering until the script finishes executing.
So when you execute the code:
divElement.className="showClass";
the element's className property has been updated, but as your script runs, the element will not immediately redraw as visible. So when you do
hiddenInputElement.focus();
the element is still hidden and you will get an error.
So, in your first version, the sequence of execution in one thread is:
- Script sets className;
- Script sets focus;
- The browser throws an exception because the hidden element is hidden;
- The script ends with an error;
- The browser updates the information based on the changes made by the script prior to the failure.
When you use the approach setTimeout
, the sequence is:
- Script sets className;
- Script ends;
- The browser updates the information based on the changes made by the script;
- Time-out:
- The script timed out sets focus, which now succeeds.
source to share
I'm not sure what's going on here, but it might be a good idea to grab the reference to the div you are using, store it in a variable, and then work on it, instead of grabbing it with getElementByID () every time.
So you're over the code:
var myDiv = document.getElementById("hiddenInput");
if(myDiv)
{
myDiv.className="showClass"; //a CSS class with display:block;
myDiv.focus();
myDiv.select();
}
Also: there are certain javascript functions in which the browser is allowed to deploy a different end (for example, the load () function); just need to keep in mind :)
source to share