Geek Answers Handbook

TabIndex - the input tab moves me to the address bar - cannot get around this with focus indices or +

I read a few threads that talk about how the address bar in IE is basically the first one that gets the focus when using TAB (this is what MSDN's own docs say).

However, I have seen situations where this does not always have to be so.

I have a main page and there is a formView inside my content area.

By default, the INSERT view is used and can never leave it (they can only be inserted without editing, and reading is processed elsewhere)

So, on my page, the page that I have is loading:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If fvwLogEntry.CurrentMode = FormViewMode.Insert = True Then 'Set the default field to position the cursor there...hopefully Dim FCtxtHrEmployeeId As TextBox FCtxtHrEmployeeId = CType(fvwLogEntry.FindControl("txtHrEmployeeId"), TextBox) Page.SetFocus(FCtxtHrEmployeeId.ClientID.ToString) End If

Now that this works, when the page loads, it sets the cursor to the employeeID text box inside the form's INSERT template.

HOWEVER, when I press TAB, it takes me to the address bar, and then, if I press tab again, it passes me through the rest of the elements on the page.

I set the tab index of the first element to 11, and then was added from there (I read that IE toolbars have index indices too, so I thought that maybe using more would get around them, but again, which is NOT REALLY doing because that it started from the lowest number anyway, but I gave him a chance to think that he would move forward, from where the focus was set.) If I click on the text box and then delete the TAB, it moves around the page as I would expect.

It is simple when the page loads and receives the focus set in the employeeID text box, which hits the tab, moves it to the address bar.

I also tried setting the other controls to -1 (those on which I did not want it to be nested), so far no luck.

So ... what can I do to get around this?

Should there be an easy way to set focus in the employeeID text box and make sure that pressing TAB after that will move to the next control in the form insert template and not jump to the address bar?

+7
tabs
source share
9 answers

I found another best option, which was the fastest I tried. Here is the code for this

 function handleTabOrder() { $('.myClass :visible:input:enabled').each(function (index) { $(this).attr('tabindex', index + 10); }); $('.myClass :visible:input:enabled:first').keydown(function (e) { if (e.keyCode == 9 || e.which == 9) { $("[tabindex=10]").focus(); } }); }

What I did here is to assign the Tab tab to all visible controls on the page, then I handled the keypress event of only the first control (which moves the control to the address bar), and now it switches the control to the next visible input on the screen.

This is just a job, but it’s faster than any other thing mentioned in the thread.

Just write the function above and all this in case of loading on the page.

+2
source share

I ran into a similar problem in IE. After some analysis, I found that this problem occurs if there is any external form of HTML content. eg:

 <html> <div id="1"> </div> <form> //other code </from> </html>

This worked for me after I moved all the HTML tags inside the form.

 <html> <form> <div id="1"> </div> //other code </from> </html>
+2
source share

I also had this problem. For me, this is caused by using the .select () method to automatically focus the focus in the text box right after the page loads. I changed my code to use the JQuery.focus () method instead, and this solved the problem.

+2
source share

Take a look: http://www.w3schools.com/tags/att_global_tabindex.asp

The txtHrEmployeeId element must have tabindex 1, and all other elements must have higher values. -1 invalid

Also make sure that tabindex is correct in the html that receives the visualization (right click on the page and "view source").

+1
source share

The following jquery code seems to work fine for me.

 $(window).load(function () { $('.myClass :visible:input:enabled:first').focus(); }); $('body').on('keydown', '.myClass :visible:input:enabled:first', function (e) { if ((e.which == 9) || (e.keyCode == 9)) { $('.myClass :visible:input:enabled:first').focus(); } });
+1
source share

I understand that this is an old post, but an even simpler way is to add the tab-stop attribute to the form element with the last tabindex. Then attach the key listener and focus on the first tabudding when tabulation occurs.

Here is a simple example:

 <input type="text" tab-stop /> $document.bind("keydown", function(event) { var attrs = event.currentTarget.activeElement.attributes; if (attrs['tab-stop']) { angular.element.find('select')[0].focus(); event.preventDefault(); } }); };
+1
source share

The answer mentioned in my other post works fine, but it made the page a huge success because every time you press a key on the page, all DOMs were looking for elements. So I found a new, more optimized solution.

 var myNameSpace = function(){ this.selector = '.myClass :visible:input:enabled:first'; this.myElement = $(selector); this._body = $('body'); var _self= this; this._body.on('keydown',_self.selector,function(e){ if ((e.which == 9) || (e.keyCode == 9)) { _self.myElement.focus(); } }); };

The general idea is to "cache" a node for access. There is no need to go through the DOM again and again, just by choosing.

0
source share

I had the same problem. Turns out mine was related to ajax modular popup extensions. a modal popup was showing up, although technically I couldn't see it because it was wrapped inside the parent div that was hidden. if you use modal popup expanders this can cause such a problem.

0
source share

If you are using JSF or Primefaces, you can use:

 <p:focus for"formname"></p:focus>
0
source share

More articles:


All Articles