CODEWITHSUNDEEP
javascripthtml
Ahmed Nabil
Ahmed Nabil

Reputation: 19036

How to rotate over HTML elements when pressing Tab key?

Without using JQuery
How to rotate over HTML elements when pressing Tab key??
For example
In this form 

<form>
    Field 1: <input type="text" id="field1" tabindex=1 /><br />
    Field 2: <input type="text" id="field2" tabindex=2 /><br />
    Field 3: <input type="text" id="field3" tabindex=3 /><br />
    Field 4: <input type="text" id="field3" tabindex=4 /><br />     
</form>

When user press Tab key continuously
The focused items will be
field1 -> field2 -> field3 -> field4 -> field1 -> field2 -> field3 -> field4 -> field1 -> ...
And so on

Upvotes: 2

Views: 2220

Answers (4)

Daniel Abril
Daniel Abril

Reputation: 454

First I'd like to thank the community. This is my first contribution after years of obtaining answers from you guys.

Yesterday I was looking for some examples of how to do this. Finally I did my own code based on arrows navigation because, as JaredMcAteer pointed out, tabbing shouldn't rotate inside a list for accessibility reasons, but jumping along the total index of active elements. Here you can find the code. Hope it helps somebody.

$('[role="menu"] li:first-child a').focus();
$('[role="menu"] a').keydown(function(e){
		var myIndex = $(this).parent().index();
		var mySibling = $(this).parents('[role="menu"]').children();
		var first = mySibling[0];
		var last = mySibling.get(-1);
		if (e.which === 38 || e.keyCode === 38){
			e.preventDefault();
			var prev = mySibling[myIndex - 1];
			if(prev){
				$(prev).children('a').focus();
			}else {
				$(last).children('a').focus();
			}
		}
		if (e.which === 40 || e.keyCode === 40){
			e.preventDefault();
			var next = mySibling[myIndex + 1];
			if(next){
				$(next).children('a').focus();
			}else {
				$(first).children('a').focus();
			}
		}
	});
.menu ul {
	margin: 0;
	padding: 0.313rem;
	background: #ccc;
	opacity: 1;
}
.menu li {
  display: block;
}
.menu li a {
	display: block;
	position: relative;
	width: 100%;
	padding: 0.313rem;
	text-decoration: none;
}
.menu ul li:nth-last-child(n+2) {
	border-bottom: solid 1px #fff;	
}
.menu ul a:hover, .menu ul a:focus {
	background: #fff;
  border: 0;
  outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
		<ul class="menu" role="menubar">
			<li role="menuitem"><a href="#target22" title="" class="settingsIcon">nav Item</a>
				<ul id="target22"  role="menu">
					<li role="menuitem" class="active"><a href="#menu1" title="">First Menu Item of the menu collection</a></li>
					<li role="menuitem"><a href="#menu2" title="">Menu Item</a></li>
					<li role="menuitem"><a href="#menu3" title="">Menu Item</a></li>
				</ul>
			</li>
		</ul>
	</nav>

Upvotes: 1

David Tinker
David Tinker

Reputation: 9644

I found another way to do this. Give the last div or whatever on your form a tabindex and then when it gets focus just move the focus to the first element on your form. I haven't set explicit tabindex on my fields so using tabindex=0 works.

var $last = $(".ok-cancel");
$last.attr("tabindex", "0");
$last.on("focus", function(){ ... move focus to first field ... }));

This has the advantage that you do not need to know what else is on the form other than the first input (which you can discover automatically if needed).

PS: I know the question says no jQuery but thats what my code is in.

Upvotes: 0

Tim Withers
Tim Withers

Reputation: 12059

Try this AFTER field4:

<script type="text/javascript">
var myInput = document.getElementById("field4");
if(myInput.addEventListener ) {
    myInput.addEventListener('keydown',this.keyHandler,false);
} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

function keyHandler(e) {
    var TABKEY = 9;
    if(e.keyCode == TABKEY) {
        if(e.preventDefault) {
            e.preventDefault();
        }
        document.getElementById('field1').focus();
        return false;
    }
}
</script>

Upvotes: 1

Nick Tomlin
Nick Tomlin

Reputation: 29261

Tab should rotate through form elements in all modern browsers. You can force the cursor to autofocus on the 1st item in the list by using the html5 autofocus attribute. Here's an example

HTML

<form>
    Field 1: <input type="text" id="field1" tabindex=1  autofocus="autofocus" /><br />
    Field 2: <input type="text" id="field2" tabindex=2 /><br />
    Field 3: <input type="text" id="field3" tabindex=3 /><br />
    Field 4: <input type="text" id="field3" tabindex=4 /><br />     
</form>

@JaredMcAteer is absolutely right in that using autofocus can degrade the experience for users, especially those with accessibility concerns. Please take that into consideration.

Upvotes: 0

Related Questions