Carpenter Posted December 8, 2007 Share Posted December 8, 2007 HiIs it possible to limit tab index traversal, as in only allowing traversing of tab index 1 to 5, and so when you tab again at tab index 5, 1 gets focus, if var X = one_to_five say, and then allow only tabbing through 6 to 11, if var X = six_to_eleven?Am new - so be gentel. Link to comment Share on other sites More sharing options...
Synook Posted December 8, 2007 Share Posted December 8, 2007 You can make the onfocus event of a input field shift the focus to another element, but there is no way of figuring out what "tab-index" a input field has. E.g. <input id="field_1" /><input id="field_2" /><!-- Etc... --><input id="field_6" onfocus="document.getElementById('field_1').focus()" /> I suppose with a bit of fiddling you could assign the onfocus event to elements based on a variable... Link to comment Share on other sites More sharing options...
Carpenter Posted December 8, 2007 Author Share Posted December 8, 2007 Thanks Synook, I will play around with the above.Am also looking for a script example to make a selected radio button (within a group) "tab index 2" say, when it's selected - out of the options available. Any thing for that? Link to comment Share on other sites More sharing options...
rnd me Posted December 9, 2007 Share Posted December 9, 2007 Am also looking for a script example to make a selected radio button (within a group) "tab index 2" say, when it's selected - out of the options available. Any thing for that?what exactly are you trying to do here?when radio inputs change value (toggled on/off), there is an attribute event called onchange that fires.when it recieves the focus from the keyboard, but does not change value, the onfocus attribute event fires.some browsers will let you distinguish which input is "current" via the :focus psuedo-selector.ex css:input:focus { border: 3px solid green; }some browsers also feature a selection change event but not as an attribute.you probably want to stick with the onfocus and onblur events, and change the className of the input inside those events.probably the easiset, well supported way of doing it.<html><head><style>.inactive { height: 20px; width: 20px}.active {height: 30px ; width: 30px; }</style></head><body><pre>html:<input type="radio" class="inactive" name="weekday" onfocus="this.className='active';" onblur="this.className='inactive'" value="mon" /> mon<input type="radio" class="inactive" name="weekday" onfocus="this.className='active';" onblur="this.className='inactive'" value="tue" /> tue<input type="radio" class="inactive" name="weekday" onfocus="this.className='active';" onblur="this.className='inactive'" value="wed" /> wed<input type="radio" class="inactive" name="weekday" onfocus="this.className='active';" onblur="this.className='inactive'" value="thr" /> thr<input type="radio" class="inactive" name="weekday" onfocus="this.className='active';" onblur="this.className='inactive'" value="fri" /> fri</pre></body></html> Link to comment Share on other sites More sharing options...
Carpenter Posted December 9, 2007 Author Share Posted December 9, 2007 Hi I think I know what you are saying rnd me, but my problem is simply tabing through my form(s) - I'm testing to see if it's uniform or currectly cycling - my problem appears when I select a radio within a group... where the tabindex does not seem to change to match my selection. If the first radio is select within the group, my form(s) has the right cycle, but any other raido selected mucks it up. Below is a snip from the file. <form name="fori4"> <p> <img style="width: 31px; height: 30px;" alt="" src="index_files/2.gif"> Select the type ofbulb to<br>be replaced:</p> <p style="width: 240px;"><input name="saving" tabindex="2" onclick="check(this.value)" value="108" type="radio">150Wbulb replaced with 42W CF<br> <input name="saving" onclick="check(this.value)" value="72" type="radio">100Wbulb replaced with 28WCF<br> <input name="saving" onclick="check(this.value)" value="53" type="radio">75Wbulb replaced with 22W CF<br> <input name="saving" onclick="check(this.value)" value="42" type="radio">60Wbulb replaced with 18W CF<br><!-- check the below value (10) for 38mm vs 26mm--> <input name="saving" onclick="check(this.value)" value="10" type="radio">38mmFluorescent tube(s) with26mm</p> </form> So what I'm trying to do is move the "tabindex="2"" to the selected radio and remove it from all others in the radio button group. Link to comment Share on other sites More sharing options...
rnd me Posted December 10, 2007 Share Posted December 10, 2007 i would have to see the check() function to tell you why it's not working.firefox defaults to using tab to move between radio groups rather than individual items.still not 100% sure what you need, but here a few pointers- setting a tabindex of -1 will prevent than input from being reached with the tab key.- disabled inputs are not included in the tab order.- use document.getElementsByName("saving") to return a collection of radio inputs above.you might find that killing all the inputs each time, then unlocking the ones you need, would be the easiest to code. Link to comment Share on other sites More sharing options...
Carpenter Posted December 10, 2007 Author Share Posted December 10, 2007 Hi again rnd meBelow is my check function: function check(saving){document.getElementById("limitations").innerHTML=saving/* make the above global */global_saving = saving/* change image */if (saving==108){document.getElementById("myImage").src="index_files/bulb1.gif"document.getElementById("myImage").title="Click for information on this recommendation."document.getElementById("centreImage").src="index_files/arrow.gif"document.getElementById("myImage2").src="index_files/cf1.gif"document.getElementById("myImage2").title="Click for information on this recommendation."/* add link to anchor to the images */document.getElementById("myImage").setAttribute("onclick", open_win);document.getElementById("myImage2").setAttribute("onclick", open_win);/* think I need to make it (id="field_1" name="saving") tabindex="2" and remove it from any other radio in the group */ }/* */else if (saving==72){document.getElementById("myImage").src="index_files/bulb2.gif"document.getElementById("myImage").title="Click for information on this recommendation."document.getElementById("centreImage").src="index_files/arrow.gif"document.getElementById("myImage2").src="index_files/cf2.gif"document.getElementById("myImage2").title="Click for information on this recommendation."/* add link to the image*//* document.getElementById("myAnchor").href="recommendations.html#2rec"*//* document.getElementById("myAnchor2").href="recommendations.html#2rec"*/document.getElementById("myImage").setAttribute("onclick", open_win2);document.getElementById("myImage2").setAttribute("onclick", open_win2);/* think I need to make it ( id="field_2 name="saving") "tabindex="2" and remove it from any other radio in the group */ }else if (saving==53){/* think I need to make it tabindex="2" and remove it from any other radio in the group */ document.getElementById("myImage").src="index_files/bulb3.gif"document.getElementById("myImage").title="Click for information on this recommendation."document.getElementById("centreImage").src="index_files/arrow.gif"document.getElementById("myImage2").src="index_files/cf3.gif"document.getElementById("myImage2").title="Click for information on this recommendation."/* add link to the image */document.getElementById("myImage").setAttribute("onclick", open_win3);document.getElementById("myImage2").setAttribute("onclick", open_win3);}else if (saving==42){/* think I need to make it tabindex="2" and remove it from any other radio in the group */ document.getElementById("myImage").src="index_files/bulb4.gif"document.getElementById("myImage").title="Click for information on this recommendation."document.getElementById("centreImage").src="index_files/arrow.gif"document.getElementById("myImage2").src="index_files/cf4.gif"document.getElementById("myImage2").title="Click for information on this recommendation."/* add link to the image */document.getElementById("myImage").setAttribute("onclick", open_win4);document.getElementById("myImage2").setAttribute("onclick", open_win4);/* */}else if (saving=="10")/* think I need to make it tabindex="2" and remove it from any other radio in the group */ {document.getElementById("myImage").src="index_files/bulb5.gif"document.getElementById("myImage").title="Click for information on this recommendation."document.getElementById("centreImage").src="index_files/arrow.gif"document.getElementById("myImage2").src="index_files/cf5.gif"document.getElementById("myImage2").title="Click for information on this recommendation."/* add link to the image */document.getElementById("myImage").setAttribute("onclick", open_win5);document.getElementById("myImage2").setAttribute("onclick", open_win5);/* */}else{document.write("<b>Hello World! This should not happen!</b>")} IE looks to me to also default to using tabs to move between "radio groups" rather than individual items. But for me anyway the tabindex of the radio button group doesn't seem to move to the selected radio - within a radio button group.Thanks for the info so far. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.