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?
-
-
You might have to test what type of form element you are working with first, but this might help:
-
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 regardsComment
-
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?????????? ????Comment
-
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.Comment
-
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.Comment
-
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.
regardsCode:<html> <head> <script type="text/javascript"> function set_focus(id) { var node = document.getElementById(id); node.focus(); } </script> </head> <body onload="set_focus('r1');"> <input type="radio" name="foo" id="r1"/> <input type="radio" name="foo" id="r2"/> <input type="radio" name="foo" id="r3"/> <input type="radio" name="foo" id="r4"/> </body> </html>Comment
-
Okay. Let's try a different angle. Here's my code. In the instance where "question('clea r1')" is called, when "tableContainer 1" is replaced by "tableContainer 0" focus goes to the object "IName", which is a textbox inside "tableContainer 0" just as it should. However, in the instance where "question('clea r2')" is called, when "tableContainer 0" is replace by "tableContainer 2" focus does not go to the object "numberLiabilit yLosses1", which is a set of radiobuttons need "numberOfLiabil ityLosses" and whose first element has the id "numberLiabilit yLosses1", until the tab key is pressed.
This is the Javascript...
and this is the HTML that calls it.Code:Node.prototype.swapNode = function (node) { var nextSibling = this.nextSibling; var parentNode = this.parentNode; node.parentNode.replaceChild(this, node); parentNode.insertBefore(node, nextSibling); } function question(x){ if(x=="clear1"){ document.getElementById('tableContainer1').swapNode(document.getElementById('tableContainer0')); document.getElementById('tableContainer1').style.visibility="hidden"; document.getElementById('tableContainer0').style.visibility="visible"; document.getElementById('tableContainer0').style.visibility="visible"; document.getElementById('IName').focus(); } if(x==clear2){ document.getElementById('tableContainer0').swapNode(document.getElementById('tableContainer5')); document.getElementById('tableContainer0').style.visibility="hidden"; document.getElementById('tableContainer5').style.visibility="visible"; scroll(0,0); document.getElementById('numberLiabilityLosses1').focus(); } }
I need for the focus to move to the radiobuttion just as it would to a textbox.Code:<input type="button" value=" Continue " id="B0" onClick="question('clear2')" name="B0" style="font-family: Tahoma; font-size: 8pt; font-weight: bold">
This problem occurs when a set of radiobuttons follows a "swapNode" call.Comment
-
could you please post the html of such a set of radiobuttons as you use it?Comment
-
Here's the code for the radiobuttons.
Code:<td width="55%" style="padding-left: 3px"> <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> <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> <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> <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> <td>Comment
-
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 regardsComment
-
You nailed it! Here's the line that fixes the problem
Code:setTimeout("document.getElementById('numberPropertyLosses1').focus()",100);Comment
-
glad to hear that the problem is resolved so far ... :)
kind regardsComment
Comment