shramanat
09-02-2008, 11:49 AM
Hi,
I need help with tabindex for javascript code intended to work in Safari browser.
Tabindex property does not seem to work as intended in Safari browser for Mac OS.
I have a frameset with two horizontal frames. The top frame has a few text input
fields and submit buttons and the bottom frame has a few more submit buttons.
I have included sample code below:
index.html
<html>
<head>
<title></title>
</head>
<frameset rows="*,50">
<frame name="header" src="header.html"></frame>
<frame name="footer" src="footer.html"></frame>
</frameset>
<body>
</body>
</html>
header.html
<html>
<head>
<title></title>
</head>
<body>
First Name: <input type="text" id="fname" name="First Name" value="" tabindex="1"/><br><br>
Middle Name: <input type="text" id="mname" name="Middle Name" value="" tabindex="2"/><br><br>
Last Name: <input type="text" id="lname" name="Last Name" value="" tabindex="3"/><br><br>
<input type="submit" id="add" name ="Add" value="Add" tabindex="4"/>
<input type="submit" id="remove" name="Remove" value="Remove" tabindex="5"/>
</body>
</html>
footer.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="submit" id="save" name ="Save" value="Save" tabindex="1"/>
<input type="submit" id="cancel" name="Cancel" value="Cancel" tabindex="2"/>
<input type="submit" id="help" name="Help" value="Help" tabindex="3"/>
</body>
</html>
I am trying to achieve navigation between the fields using the tab key. In Firefox and
IE browsers, the navigation using Tab Key works just fine. However, in Mac OS Safari Browser,
the above code does not work properly when I try to navigate between the fields using Tab key.
The tab key works only for the text input fields and not for buttons.
I have also tried the following changes to navigate to the buttons using the jump function
mentioned below:
utils.js
function jump(id){
with(document.getElementById(id)){
focus();
select();
}
}
Modified header.html
<html>
<head>
<title></title>
<script src="utils.js"></script>
</head>
<body>
First Name: <input type="text" id="fname" name="First Name" value="" tabindex="1" /><br><br>
Middle Name: <input type="text" id="mname" name="Middle Name" value="" tabindex="2"/><br><br>
Last Name: <input type="text" id="lname" name="Last Name" value="" tabindex="3" onBlur="jump('add')'"/><br><br>
<input type="submit" id="add" name ="Add" value="Add" tabindex="4" onBlur="jump('remove')'"/>
<input type="submit" id="remove" name="Remove" value="Remove" tabindex="5" onBlur="jump('save')'"/>
</body>
</html>
modified footer.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="submit" id="save" name ="Save" value="Save" tabindex="1" onBlur="jump('cancel')'"/>
<input type="submit" id="cancel" name="Cancel" value="Cancel" tabindex="2" onBlur="jump('help')'"/>
<input type="submit" id="help" name="Help" value="Help" tabindex="3"/>
</body>
</html>
However, the focus is still not transferring to the buttons and the navigation using Tab key works only
for the text input fields and that too, only within the header frame.
Can you please provide some pointers on how I can achieve the navigation using tab key between the fields
as mentioned above to work in Safari for Mac browser ?
Highly appreciate your inputs.
I need help with tabindex for javascript code intended to work in Safari browser.
Tabindex property does not seem to work as intended in Safari browser for Mac OS.
I have a frameset with two horizontal frames. The top frame has a few text input
fields and submit buttons and the bottom frame has a few more submit buttons.
I have included sample code below:
index.html
<html>
<head>
<title></title>
</head>
<frameset rows="*,50">
<frame name="header" src="header.html"></frame>
<frame name="footer" src="footer.html"></frame>
</frameset>
<body>
</body>
</html>
header.html
<html>
<head>
<title></title>
</head>
<body>
First Name: <input type="text" id="fname" name="First Name" value="" tabindex="1"/><br><br>
Middle Name: <input type="text" id="mname" name="Middle Name" value="" tabindex="2"/><br><br>
Last Name: <input type="text" id="lname" name="Last Name" value="" tabindex="3"/><br><br>
<input type="submit" id="add" name ="Add" value="Add" tabindex="4"/>
<input type="submit" id="remove" name="Remove" value="Remove" tabindex="5"/>
</body>
</html>
footer.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="submit" id="save" name ="Save" value="Save" tabindex="1"/>
<input type="submit" id="cancel" name="Cancel" value="Cancel" tabindex="2"/>
<input type="submit" id="help" name="Help" value="Help" tabindex="3"/>
</body>
</html>
I am trying to achieve navigation between the fields using the tab key. In Firefox and
IE browsers, the navigation using Tab Key works just fine. However, in Mac OS Safari Browser,
the above code does not work properly when I try to navigate between the fields using Tab key.
The tab key works only for the text input fields and not for buttons.
I have also tried the following changes to navigate to the buttons using the jump function
mentioned below:
utils.js
function jump(id){
with(document.getElementById(id)){
focus();
select();
}
}
Modified header.html
<html>
<head>
<title></title>
<script src="utils.js"></script>
</head>
<body>
First Name: <input type="text" id="fname" name="First Name" value="" tabindex="1" /><br><br>
Middle Name: <input type="text" id="mname" name="Middle Name" value="" tabindex="2"/><br><br>
Last Name: <input type="text" id="lname" name="Last Name" value="" tabindex="3" onBlur="jump('add')'"/><br><br>
<input type="submit" id="add" name ="Add" value="Add" tabindex="4" onBlur="jump('remove')'"/>
<input type="submit" id="remove" name="Remove" value="Remove" tabindex="5" onBlur="jump('save')'"/>
</body>
</html>
modified footer.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="submit" id="save" name ="Save" value="Save" tabindex="1" onBlur="jump('cancel')'"/>
<input type="submit" id="cancel" name="Cancel" value="Cancel" tabindex="2" onBlur="jump('help')'"/>
<input type="submit" id="help" name="Help" value="Help" tabindex="3"/>
</body>
</html>
However, the focus is still not transferring to the buttons and the navigation using Tab key works only
for the text input fields and that too, only within the header frame.
Can you please provide some pointers on how I can achieve the navigation using tab key between the fields
as mentioned above to work in Safari for Mac browser ?
Highly appreciate your inputs.