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

How can I simulate a tab key press?

100+
P: 110
I have a webpage where a javascript routine swaps tables to "clear" the screen and start a new group of questions. After the screen is cleared a textbox or a drop-down menu can receive focus by simply getting the element by ID, ending in .focus(). No problem. However, if the first object on a screen is a radiobutton it will not accept focus unless there is a tab key press. How can I simulate a tab key press so the radiobutton can receive focus?
Jan 20 '09 #1
Share this Question
Share on Google+
12 Replies


P: 33
You might have to test what type of form element you are working with first, but this might help:

http://bytes.com/groups/javascript/9...s-radio-button
Jan 20 '09 #2

gits
Expert Mod 5K+
P: 5,390
as was said here already the element IS focused when it is retrieved correctly ... but IE just don't show you that ...

the only solution i could think of is to change the style of the radiobutton accordingly with JavaScript to workaround this problem with IE or to reorder the nodes so that the radiobutton is not the first node to get focussed - in case that would be possible.

kind regards
Jan 20 '09 #3

100+
P: 110
Again, how can I simulate a tab key press???

This other stuff doesn't work. You still have to press the tab key for the radiobutton to receive focus.

So, how can I simulate a tab key press??????????????
Jan 20 '09 #4

P: 33
No, you do not have to press the tab key...the element DOES have focus if you are using the appropriate method...I just don't think IE displays focus properly in this case.
Jan 20 '09 #5

100+
P: 110
Alright, I'll bite. What is the proper method?

Each input object I use has an onFocus and onBlur linked to functions that turn on and turn off a yellow background when the object has focus. When the screen appears that begins with a radiobutton the tab key must be pressed once for the background to turn yellow. Then and only then the radiobutton can be selected with the space bar. If you press the space bar before pressing the tabkey focus jumps to a different object at the bottom of the screen. All radiobuttons after the first receive focus properly and can be selected with the space bar or a mouse click.

I appreciate having forums like this one where I can ask questions when I get stuck; but, all too often your answers do not contain any information I can use. Simply arguing about whether or not the radiobutton has focus -- "if I have used the proper method" doesn't give me anything to work with. Please either answer the question I ask, offer enough details to get me started or let someone else answer.
Jan 21 '09 #6

gits
Expert Mod 5K+
P: 5,390
if you have read acoder's answer here carefully you probably would have the answer, here is an example for the 'proper' method that was mentioned there, and when you test it with FF you will see that the node is focused while it works in IE too but you just don't see that it is focused while in fact it is.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function set_focus(id) {
  5.     var node = document.getElementById(id);
  6.     node.focus();
  7. }
  8. </script>
  9. </head>
  10.  
  11. <body onload="set_focus('r1');">
  12.     <input type="radio" name="foo" id="r1"/>
  13.     <input type="radio" name="foo" id="r2"/>
  14.     <input type="radio" name="foo" id="r3"/>
  15.     <input type="radio" name="foo" id="r4"/>
  16. </body>
  17. </html>
regards
Jan 21 '09 #7

100+
P: 110
Okay. Let's try a different angle. Here's my code. In the instance where "question('clear1')" is called, when "tableContainer1" is replaced by "tableContainer0" focus goes to the object "IName", which is a textbox inside "tableContainer0" just as it should. However, in the instance where "question('clear2')" is called, when "tableContainer0" is replace by "tableContainer2" focus does not go to the object "numberLiabilityLosses1", which is a set of radiobuttons need "numberOfLiabilityLosses" and whose first element has the id "numberLiabilityLosses1", until the tab key is pressed.

This is the Javascript...

Expand|Select|Wrap|Line Numbers
  1. Node.prototype.swapNode = function (node) {
  2.   var nextSibling = this.nextSibling;
  3.   var parentNode = this.parentNode;
  4.   node.parentNode.replaceChild(this, node);
  5.   parentNode.insertBefore(node, nextSibling);
  6.   }  
  7.  
  8. function question(x){
  9.    if(x=="clear1"){
  10.    document.getElementById('tableContainer1').swapNode(document.getElementById('tableContainer0'));
  11.    document.getElementById('tableContainer1').style.visibility="hidden";
  12.    document.getElementById('tableContainer0').style.visibility="visible";
  13.    document.getElementById('tableContainer0').style.visibility="visible";
  14.    document.getElementById('IName').focus();
  15.    }
  16.  
  17.  
  18. if(x==clear2){
  19. document.getElementById('tableContainer0').swapNode(document.getElementById('tableContainer5'));
  20.    document.getElementById('tableContainer0').style.visibility="hidden";
  21.    document.getElementById('tableContainer5').style.visibility="visible";
  22.    scroll(0,0);
  23.    document.getElementById('numberLiabilityLosses1').focus();
  24. }
  25. }
  26.  
and this is the HTML that calls it.

Expand|Select|Wrap|Line Numbers
  1. <input type="button" value="     Continue     " id="B0" onClick="question('clear2')" name="B0" style="font-family: Tahoma; font-size: 8pt; font-weight: bold">
  2.  
I need for the focus to move to the radiobuttion just as it would to a textbox.

This problem occurs when a set of radiobuttons follows a "swapNode" call.
Jan 21 '09 #8

gits
Expert Mod 5K+
P: 5,390
could you please post the html of such a set of radiobuttons as you use it?
Jan 21 '09 #9

100+
P: 110
Here's the code for the radiobuttons.

Expand|Select|Wrap|Line Numbers
  1. <td width="55%" style="padding-left: 3px">
  2.                   <input type="radio" value="0" name="numberPropertyLosses" id="numberPropertyLosses1" onFocus="yellowOn('numberPropertyLosses1')" onBlur="yellowOff('numberPropertyLosses1')" onClick="javascript:question('6')" tabindex="40"><b><font face="Arial Narrow" size="2" color="#003300">None</font></b>
  3.                   <input type="radio" value="1" name="numberPropertyLosses" id="numberPropertyLosses2" onFocus="yellowOn('numberPropertyLosses2')" onBlur="yellowOff('numberPropertyLosses2')" onClick="javascript:question('6')" tabindex="41" ><b><font face="Arial Narrow" size="2" color="#003300">1 </font></b>
  4.                   <input type="radio" value="2" name="numberPropertyLosses" id="numberPropertyLosses3" onFocus="yellowOn('numberPropertyLosses3')" onBlur="yellowOff('numberPropertyLosses3')" onClick="javascript:question('6')" tabindex="42" ><font face="Arial Narrow"><b><font size="2" color="#003300">2</font></b><font color="#003300"> </font></font>
  5.                   <input type="radio" value="M" name="numberPropertyLosses" id="numberPropertyLosses4" onFocus="yellowOn('numberPropertyLosses4')" onBlur="yellowOff('numberPropertyLosses4')" onClick="javascript:question('6')" tabindex="43" ><font face="Arial Narrow"><b><font size="2" color="#003300">more?</font></b></font></td>
  6.                       <td>
  7.  
Jan 21 '09 #10

gits
Expert Mod 5K+
P: 5,390
hmmm ... try to set the focus within a timeout ... i think the swapNode could be a bit too slow? could you trace before setting the focus that the node you want to retrieve is not null?

kind regards
Jan 21 '09 #11

100+
P: 110
You nailed it! Here's the line that fixes the problem

Expand|Select|Wrap|Line Numbers
  1. setTimeout("document.getElementById('numberPropertyLosses1').focus()",100);
  2.  
  3.  
Jan 22 '09 #12

gits
Expert Mod 5K+
P: 5,390
glad to hear that the problem is resolved so far ... :)

kind regards
Jan 22 '09 #13

Post your reply

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