By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,045 Members | 1,372 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,045 IT Pros & Developers. It's quick & easy.

giving focus to an html element

Claus Mygind
100+
P: 571
I am creating an element dynamically as I load it on the screen. When it was hard coded on the page I had no problem executing the following two lines.

document.getElementById("SEARCH").select();
document.getElementById("SEARCH").focus();

Now I create the element the following way (see below) in my js function followed by the two lines above. I get no error message, but the input field has not received focus.


Expand|Select|Wrap|Line Numbers
  1. td.innerHTML =    '<INPUT'+
  2.     ' type="text"'+ 
  3.     ' name="SEARCH"'+ 
  4.     ' id="SEARCH"'+
  5.     ' maxLength='+ cMax + 
  6.     ' size='+ cLength +
  7.     ' onKeyPress="if (isEnter(event)) {'+cInsert+'};"'+
  8.     ' />';
May 28 '08 #1
Share this Question
Share on Google+
4 Replies


Claus Mygind
100+
P: 571
It appears to be a timing issue.

I am using FireFox v 2.0.0.14

I just moved the two lines into their own function and invoked the setTimeout() method and now it works fine like this:

Expand|Select|Wrap|Line Numbers
  1. var TimeoutID = setTimeout("giveSearchFocus()", 50);
  2.  
  3. function giveSearchFocus(){
  4.     document.getElementById("SEARCH").select();
  5.     document.getElementById("SEARCH").focus();
  6. }
May 28 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Thanks for posting. Yes, that makes sense. It would take a bit of time (even a few milliseconds) for the element to appear in the DOM.

PS. please use [code] tags when posting code. Thanks!
May 28 '08 #3

gits
Expert Mod 5K+
P: 5,390
It appears to be a timing issue.

I am using FireFox v 2.0.0.14

I just moved the two lines into their own function and invoked the setTimeout() method and now it works fine like this:

Expand|Select|Wrap|Line Numbers
  1. var TimeoutID = setTimeout("giveSearchFocus()", 50);
  2.  
  3. function giveSearchFocus(){
  4.     document.getElementById("SEARCH").select();
  5.     document.getElementById("SEARCH").focus();
  6. }
hi ...

just another note since there is a possibility to avoid the eval within the timeout ... just use the function-reference instead of the 'eval-like' parameter -> the following would be sufficent and avoids the eval-operation:

Expand|Select|Wrap|Line Numbers
  1. function giveSearchFocus() {
  2.     document.getElementById("SEARCH").select();
  3.     document.getElementById("SEARCH").focus();
  4. }
  5.  
  6. var TimeoutID = setTimeout(giveSearchFocus, 50);
  7.  
kind regards
May 28 '08 #4

Claus Mygind
100+
P: 571
Thanks for posting. Yes, that makes sense. It would take a bit of time (even a few milliseconds) for the element to appear in the DOM.

PS. please use code tags when posting code. Thanks!
Sorry for the improper use of code tags not sure how they work, but in the future I will attempt to do that.

Expand|Select|Wrap|Line Numbers
  1. some code
this is just my test of using code tags no response necessary.
May 29 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.