473,405 Members | 2,338 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

How can I simulate a tab key press?

110 100+
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
12 38426
flydev
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
5,390 Expert Mod 4TB
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
andersond
110 100+
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
flydev
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
andersond
110 100+
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
5,390 Expert Mod 4TB
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
andersond
110 100+
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
5,390 Expert Mod 4TB
could you please post the html of such a set of radiobuttons as you use it?
Jan 21 '09 #9
andersond
110 100+
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
5,390 Expert Mod 4TB
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
andersond
110 100+
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
5,390 Expert Mod 4TB
glad to hear that the problem is resolved so far ... :)

kind regards
Jan 22 '09 #13

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

Similar topics

1
by: Mike | last post by:
I have a form with a textbox and a button. If I press the button, I want to type the letter q into the textbox. What would I put into the event handler of the button in order to simulate the q...
3
by: Dan | last post by:
Consider a simple form with a textbox and button. Is there a way to handle the common situation where a user presses "return" rather than clicks on the button. I can already detect the...
3
by: Maileen | last post by:
Hi, I would like to know how to simulate an event in VB.NET ? in fact, for example when user press enter in some special textbox, i would like to raise a listview column click (for example). ...
4
by: Joel | last post by:
Can anyone tell me how to simulate a 'key press' or 2 in C/C++. Is there any interrupt to do the trick? Is there any software online to do it? Regards, - Joel
3
by: John Dalberg | last post by:
I have an app that keeps popping up a windows with a 'Yes' or 'OK' button on it. I am trying to write a little app that automates hitting the enter key so I don't have to do it myself. I used...
2
by: jonathan184 | last post by:
Hi I am try to create a script to login EMS admin tool *JMS* Now the admin account has a blank password. so if i login normal usually i type this: i press enter username(ADMIN) prompt - i...
3
by: =?Utf-8?B?SmFrb2IgTGl0aG5lcg==?= | last post by:
I have two sets of search criteria on my page. They are placed inside two DIV tags made visible/hidden by a client script. In each DIV tag I have a LinkButton that performs the search from each...
3
by: =?Utf-8?B?cHJvZ2dlcg==?= | last post by:
I have a C# application that hosts an AxWebBrowser control which I automate by sending mouse clicks and keyboard input. I have had various problems in doing this due to a bug in the AxWebBrowser...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.