Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Feb 8, 2013, 08:54 AM   #1
sk3pt1c
macrumors 6502a
 
Join Date: Nov 2005
Location: a simulacrum
How can I allow the tab key only inside a specific div?

I have a form that is broken down into several tabs/pages to make it easier for the user to fill.

The thing is, there are buttons to go from page to page but if you keep pressing the tab key you will go to the next page but it breaks the form.

I want to be able to allow the tab key only inside each and prevent it from skipping from one to the next.

Setting the tabindex to -1 won't work because i actually want the users to navigate the pages with the tab key properly.

I've also tried adding tabindex="-1" to the div but it doesn't seem to work.

So i'm guessing jQuery?

The form has basic text boxes, dropdowns and radios and it's wrapped in a codaslider content sliding plugin.
__________________
Vi Veri Veniversum Vivus Vici
Macbook Pro 15" Retina
sk3pt1c is offline   0 Reply With Quote
Old Feb 8, 2013, 06:14 PM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
It is wise to manually specify tabindex="x" in each form element using positive integers in the order you want them to be focused as sometimes browsers don't respect the flow order. But what will also help you is to know to use value 0 to skip any element (i.e. next/prev page buttons outside of the form as you noted). Not negative.

The tabindex attribute can also be used with <a>, <textarea>, <select>, and <button> elements, FYI when you design forms.

On a side note if you want to force a form field (i.e. the first one) to be focused then assign it an ID and in Javascript:

Code:
var field = document.getElementById("foobar");
field.onblur = function() {
    field.focus();
}
-jim
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Feb 11, 2013, 02:49 AM   #3
sk3pt1c
Thread Starter
macrumors 6502a
 
Join Date: Nov 2005
Location: a simulacrum
Hello and thanks for your reply.

The problem is that my form encompasses divs and i don't want the user to tab from one div to the next.

So it's like this

<form>
<div>
Page 1 fields
</div>
<div>
Page 2 fields
</div>
</form>

i want the users to be able to tab from one field to the next in each page, but not from the last field of one page to the first field of the next. so in essence i want the tab key to work only inside the divs and not from one to the next.
__________________
Vi Veri Veniversum Vivus Vici
Macbook Pro 15" Retina
sk3pt1c is offline   0 Reply With Quote
Old Feb 11, 2013, 03:49 PM   #4
manueld
macrumors 6502
 
Join Date: Jun 2009
Maybe adding validation rules so that a user can't proceed would probably accomplish what your looking to do.
manueld is offline   0 Reply With Quote
Old Feb 12, 2013, 01:41 AM   #5
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
Quote:
Originally Posted by sk3pt1c View Post
Hello and thanks for your reply.

The problem is that my form encompasses divs and i don't want the user to tab from one div to the next.

So it's like this

<form>
<div>
Page 1 fields
</div>
<div>
Page 2 fields
</div>
</form>

i want the users to be able to tab from one field to the next in each page, but not from the last field of one page to the first field of the next. so in essence i want the tab key to work only inside the divs and not from one to the next.
I'm assuming that you are mixing up "page" and "div" here.

If you don't want users to be able to move from the end of one div to the start of the next, why have them in the same form? Are there mandatory fields in each part of the form? Why does tabbing between divs "break the form"?

Without knowing what you are aiming to achieve in a system wide sense it's hard to give any clues.
Dunmail is offline   0 Reply With Quote
Old Feb 12, 2013, 01:52 AM   #6
sk3pt1c
Thread Starter
macrumors 6502a
 
Join Date: Nov 2005
Location: a simulacrum
Quote:
Originally Posted by Dunmail View Post
I'm assuming that you are mixing up "page" and "div" here.

If you don't want users to be able to move from the end of one div to the start of the next, why have them in the same form? Are there mandatory fields in each part of the form? Why does tabbing between divs "break the form"?

Without knowing what you are aiming to achieve in a system wide sense it's hard to give any clues.
because the divs are how the scroller breaks up the form into "pages", they're the slider's panels.

the form encompasses all the panel divs.

there are "next" buttons that do the validation of any required fields when clicked (not all panels have required fields) but if you tab from the last field of one panel you go to the first field of the next, effectively breaking the validation and the slider layout because it doesn't slide to the next panel.
__________________
Vi Veri Veniversum Vivus Vici
Macbook Pro 15" Retina
sk3pt1c is offline   0 Reply With Quote
Old Feb 12, 2013, 03:26 AM   #7
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
OK, but why is the form so big that you need it on different panels? (let's use panels here rather than pages)

As someone else has suggested, add the validation code to the transition, not the button, so it doesn't matter how the user moves from one panel to the next.
Dunmail is offline   0 Reply With Quote
Old Feb 12, 2013, 03:50 AM   #8
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by sk3pt1c View Post
Hello and thanks for your reply.

The problem is that my form encompasses divs and i don't want the user to tab from one div to the next.

So it's like this

<form>
<div>
Page 1 fields
</div>
<div>
Page 2 fields
</div>
</form>

i want the users to be able to tab from one field to the next in each page, but not from the last field of one page to the first field of the next. so in essence i want the tab key to work only inside the divs and not from one to the next.
Should have posted that first

Others offered the proper advice (re: validation code, i.e. rules as to when to submit) but I am as confused as others when you say PAGE. I think you meant panel, i.e. region, whatever you want to call each div but clearly by your code above there is one page and one form. If not, you need to include a link to this page so we can see for ourselves as my original advice still stands, applying tabindex 1,2,3 etc. to all form elements on the page and 0 for your next/prev which traditionally are <a> and <button>. This means a user can cycle from the top to bottom, then submit button, but they must CLICK the next/prev. Set the form focus to first element in the first region as a I noted and users really appreciate that kind of stuff. The validation rules are for the submit and you can also check if next/prev were clicked and prevent submit.

I covered it all here, I think. Happy coding.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Feb 12, 2013, 06:36 AM   #9
sk3pt1c
Thread Starter
macrumors 6502a
 
Join Date: Nov 2005
Location: a simulacrum
Quote:
Originally Posted by SrWebDeveloper View Post
Should have posted that first

Others offered the proper advice (re: validation code, i.e. rules as to when to submit) but I am as confused as others when you say PAGE. I think you meant panel, i.e. region, whatever you want to call each div but clearly by your code above there is one page and one form. If not, you need to include a link to this page so we can see for ourselves as my original advice still stands, applying tabindex 1,2,3 etc. to all form elements on the page and 0 for your next/prev which traditionally are <a> and <button>. This means a user can cycle from the top to bottom, then submit button, but they must CLICK the next/prev. Set the form focus to first element in the first region as a I noted and users really appreciate that kind of stuff. The validation rules are for the submit and you can also check if next/prev were clicked and prevent submit.

I covered it all here, I think. Happy coding.
OK, I have confused you guys with the "pages", "tabs" and "panels", here is some code:

Code:
<form action="" method="post">

<div id="slider-id-wrapper" class="coda-slider-wrapper">

<!--this is the slider panel navigation-->
<div class="coda-nav">
<ul>
</ul>
</div>

<div class="coda-slider"  id="slider-id">

<!--Panel 1-->
<div id="panel1">
                                                    
various form fields here
													
<a id="panel1nextButton" class="next-btn" href="#2" data-ref="slider-id">Next Step</a>
</div>

<!--Panel 2-->
<div id="panel2">
                                                    
various form fields here
													
<a class="previous-btn" href="#1" data-ref="slider-id">Previous Step</a>
<a id="panel2nextButton" class="next-btn" href="#3" data-ref="slider-id">Next Step</a>
</div>

<!--Panel 3-->
<div id="panel3">
                                                    
various form fields here
													
<a class="previous-btn" href="#2" data-ref="slider-id">Previous Step</a>
<a id="panel2nextButton" class="next-btn" href="#4" data-ref="slider-id">Next Step</a>
</div>

<!--Panel 4-->
<div id="panel4">
                                                    
various form fields here
													
<a class="previous-btn" href="#3" data-ref="slider-id">Previous Step</a>
<a id="panel2nextButton" class="next-btn" href="#5" data-ref="slider-id">Next Step</a>
</div>

<!--Panel 5-->
<div id="panel5">
                                                    
various form fields here
													
<a class="previous-btn" href="#4" data-ref="slider-id">Previous Step</a>
<!--Submit button-->
<input type="submit" id="form-submit-button" name="Submit" value=""/>
</div>   
                                                 
</div>
<!--end of .coda-slider-->

</div>			
<!--end of slider-id-wrapper-->

</form>
<!--end of form-->
The form has to be in panels because it has many fields.
The validation has been rigged to the "Next" links.
When you tab from the last field of panel1, even if the "Next" link has a tabindex of 0 or -1, it will skip that element
and move on to the next available field, which is in panel2, hence the validation and form layout breaks.
The way the slider works is it creates panels and puts them side by side to make a really wide container which it slides to the left everytime you hit the "Next" button.

I want the tab key to work inside each panel but not have the user be able to tab from the end of one to the beginning of another panel.
__________________
Vi Veri Veniversum Vivus Vici
Macbook Pro 15" Retina
sk3pt1c is offline   0 Reply With Quote
Old Feb 12, 2013, 07:08 AM   #10
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
What you can do (and there are potential usability issues) is capture the tab keyevent and cancel the default behaviour then add your own.

Code:
function stop_tab(e){
    if(e.target.id === 'lastInput'){
        if(e.keyCode === 9){
            e.preventDefault();
        }
    }
}
You'd have to attach this, or something like it, to the last input field on each div.
Is this what you are after?

Last edited by Dunmail; Feb 12, 2013 at 07:09 AM. Reason: Missed a bit of explanation.
Dunmail is offline   0 Reply With Quote
Old Feb 12, 2013, 07:17 AM   #11
sk3pt1c
Thread Starter
macrumors 6502a
 
Join Date: Nov 2005
Location: a simulacrum
Quote:
Originally Posted by Dunmail View Post
What you can do (and there are potential usability issues) is capture the tab keyevent and cancel the default behaviour then add your own.

Code:
function stop_tab(e){
    if(e.target.id === 'lastInput'){
        if(e.keyCode === 9){
            e.preventDefault();
        }
    }
}
You'd have to attach this, or something like it, to the last input field on each div.
Is this what you are after?
i've tried something like that but this works like a tabindex of 0 or -1 in practice, it just skips that element and moves to the next one which is on the second panel (unless i'm doing something horribly wrong of course).

i guess there's some logic i'm missing in how to properly allow/disallow the tab key...
__________________
Vi Veri Veniversum Vivus Vici
Macbook Pro 15" Retina
sk3pt1c is offline   0 Reply With Quote
Old Feb 12, 2013, 07:34 AM   #12
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
You don't just cancel the default action you need to give it an action like moving focus to the "Next" button. The "Next" button should also handle the tab key so that if the user presses "TAB" or "ENTER" or clicks the button then the validation and moving to the next panel takes place.

Basically you need to ensure that focus moves from the last input field on each panel moves to the "Next" button and that the "Next" button handles the tab key.
Dunmail is offline   0 Reply With Quote
Old Feb 12, 2013, 07:58 AM   #13
sk3pt1c
Thread Starter
macrumors 6502a
 
Join Date: Nov 2005
Location: a simulacrum
Quote:
Originally Posted by Dunmail View Post
You don't just cancel the default action you need to give it an action like moving focus to the "Next" button. The "Next" button should also handle the tab key so that if the user presses "TAB" or "ENTER" or clicks the button then the validation and moving to the next panel takes place.

Basically you need to ensure that focus moves from the last input field on each panel moves to the "Next" button and that the "Next" button handles the tab key.
That makes sense but how would i go about implementing that?

At the moment i'm hijacking the content slider's function for links inside the panels and doing the validation when the link is clicked. If invalid, i disable the href of the link and mark the invalid fields. If valid, i enable the href and let the slider slide to the next panel
__________________
Vi Veri Veniversum Vivus Vici
Macbook Pro 15" Retina
sk3pt1c is offline   0 Reply With Quote
Old Feb 12, 2013, 08:15 AM   #14
Dunmail
macrumors regular
 
Join Date: Mar 2009
Location: Skipton, UK
I'm afraid I don't know about codaslider. Where you say that you are "hijacking the content slider's function" Then this is the event handler for the button. What you need to do is attach event handlers to the last input field on each panel to disable the tabbing, so using the previous function.

Code:
<input onclick=stop_tab id='last_field'> ... </input>
Is the old way of doing it.
Dunmail is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Help with Xcode [how can i do so a button sends me to a specific tab] Intelligent Mac Programming 26 May 14, 2014 10:40 AM
Swtich between 2 specific tabs in Sarari like Ctrl-Tab in a pc JohnDohe OS X Mavericks (10.9) 2 Dec 24, 2013 11:29 PM
tablets: Samsung's next Galaxy Tab will have Intel inside, says Reuters AutoUnion39 Alternatives to iOS and iOS Devices 0 May 31, 2013 11:16 AM
encrypt NSString with MD5 and specific key macdan56 iPhone/iPad Programming 2 Nov 5, 2012 01:10 AM
How to read specific key value from plist file saqibjaan Mac Programming 3 Sep 2, 2012 09:27 PM

Forum Jump

All times are GMT -5. The time now is 07:19 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC