In an effort to make my apps run faster, I have started to embed a search feature into the html page with javaScript to call and execute an ajax routine. Everything works fine except for setting focus to the first (and only) input element.
The problem is sometimes, the cursor is there instantaneously other times it can take several seconds for it to appear. The users are annoyed that they cannot start typing right away. How can I resolve this issue and always have the cursor appear right away?
Code:
//~~~~~ Display search box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function showPopSearch( ) { if ( document.getElementById("popSearch").style.visibility == "hidden" ) { document.getElementById("popSearch").style.backgroundColor = "#E4BF87"; document.getElementById("popSearch").style.borderStyle = "ridge"; document.getElementById("popSearch").style.borderWidth = "5px"; document.getElementById("popSearch").style.borderColor = "orange"; document.getElementById("popSearch").style.zIndex = "99"; document.getElementById("popSearch").style.visibility = "visible"; document.getElementById("popSearch").style.overflow = "hidden"; //to make this brief showGetSearch() is not shown here showGetSearch( ); //I have to use this timeout or it will run right past the giveSeachFocus( ) var TimeoutID = setTimeout("giveSearchFocus()", 150); } } //~~~~~ Give Search element focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ function giveSearchFocus(){ document.getElementById("SEARCH").select(); document.getElementById("SEARCH").focus(); }
Comment