469,613 Members | 1,175 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,613 developers. It's quick & easy.

setfocus to field inside tabs/pages

Hi,

I would like to set focus to a field in a form inside a tab page.
It is a multiple tabs under different divisions (eg: sc1,sc2,sc3,etc)

<div name='sc1'>
<form name='form1'>
<input name='myfield'>
</form>
</div>

Then I do this :

document.form1.myfield.focus()

It gives me error : can not move focus to the control because it is invisible,not enabled or of a type that can not accept focus

What is the correct command ?

Regards
Hoe
Jul 23 '05 #1
3 2502
Ivo
"tnhoe" <tn***@pc.jaring.my> wrote

I would like to set focus to a field in a form inside a tab page.
It is a multiple tabs under different divisions (eg: sc1,sc2,sc3,etc)

<div name='sc1'>
<form name='form1'>
<input name='myfield'>
</form>
</div>

Then I do this :

document.form1.myfield.focus()

It gives me error : can not move focus to the control because it is
invisible,not enabled or of a type that can not accept focus

What is the correct command ?
You don't say the important thing about tabs: that they can be hidden. If
the form is inside a div that has a style rule like "display:none" or
"visibility:hidden", either literally or through a class or whatever, then
the form is hidden too, so the input element is hidden too and hidden
elements can by their very nature not receive focus!
document.form1.myfield.select() would throw the same error.
So you must check all parent elements for their visibility, or put the
focus() call in a try/catch block. It should not be hard to tell scriptwise
whether a tab is currently the one and only visible and active tab. A last
idea, to arrange your page to use overlapping tabs or moving tabs offscreen
rather than hidden tabs, would introduce other problems.

hth
ivo
Jul 23 '05 #2
Ivo,

Each tab will become active focus/display when mouseover.
How do I set focus to a field when the tab is active ?

This is the part I download somewhere :-

<style type="text/css">

#ddimagetabs{
}

#ddimagetabs a{
display:block;
text-decoration: none;
font: 12px Arial; /*tab font */
color: black; /*font color */
width: 86px; /*width of tab image */
height: 22px; /*height of tab image */
display:inline;
float: left;
margin-left: 4px; /*spacing between tabs */
padding-top: 4px; /*vertical offset of tab text from top of tab*/
background-image:url(bluetab.jpg); /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}

#ddimagetabs a:hover, #ddimagetabs a.current{
background-image:url(bluetabover.jpg); /*URL to tab image onmouseover */
color: black;
}

#tabcontentcontainer{
width:950px; /*width of 2nd level content*/
height:500px; /*height of 2nd level content. Set to largest's content height
to avoid jittering.*/
padding: 5px;
border: 1px solid blue;
}

..tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu II script- Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:

var initialtab=[1,'sc1']

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes
////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display:
none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display ="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>
Regards
Hoe
Jul 23 '05 #3
tnhoe wrote:
Ivo,

Each tab will become active focus/display when mouseover.
How do I set focus to a field when the tab is active ?


You are using an A element with hover to change the colour of your tabs
to show which is 'active'.

Presumably you wish to add a mouseover event to make the body associated
with the tab visible when the mouse is over the tab. I prefer an
onclick event, but that's your choice - mouseover in this case is much
to 'busy' for my liking. Since you need a mouseover for the bodies to
be hidden and shown, you may as well ditch the A and hover and just use
plain divs. It also means you won't get any hover behaviour if
JavaScript is disabled (a good thing I think).

The script below adds a mouseover event to each tab to make the tab
'highlighted', set all the other tabs to 'not highlighted', hide all the
other bodies and show the body associated with the 'mouseover' tab.
Finally, set focus on the first text input of the first form in the
currently displayed body - this produces a non-critical error in
Firefox, there is no workaround that I am aware of - it isn't fatal,
just annoying if the JavaScript console is visible and set to display
errors.

For extra speed, an array is created and kept of references to the tabs
and associated bodies based on ids.

You need to make sure that if JavaScript is not enabled, the body of
each tab still shows (as per the example). Note that my CSS is pretty
ordinary, it's just there for the demo.
[...]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">

var aTabs = []; // Array of tab div element references
var aBods = []; // Array of body div element references

function initTabs() {
// Check required features are supported
if ( ! document.getElementsByTagName ) return;
// Get a collection of all divs
var divs = document.getElementsByTagName('div');
var d, i=0, j=divs.length;
// Add divs to body div or tab div array depending on id
while ( i<j ) {
d = divs[i];
i++;
if ( d.id ) {
if ( d.id.match( 'body_' ) ){
aBods.push(d);
d.className += ( i < 2 )? ' activeB':' inactiveB';
} else if ( d.id.match( 'tab_' ) ){
aTabs.push(d);
d.onmouseover = showBod;
d.className += ( i < 2 )? ' activeT':' inactiveT';
}
}
}
// Set 0 tab to shown
showBod( aTabs[0] );
}

function showBod( el ) {
var b, n, t;
if ( !el || !el.nodeName ) el = this;
var n = 'body_' + el.id.split('_')[1];
var i = aBods.length;
while ( i-- ) {
b = aBods[i];
t = aTabs[i];
if ( n == b.id ) {
b.className = b.className.replace(/\binactiveB\b/,' activeB');
t.className = t.className.replace(/\binactiveT\b/,' activeT');
fieldFocus( b );
} else {
b.className = b.className.replace(/\bactiveB\b/,' inactiveB');
t.className = t.className.replace(/\bactiveT\b/,' inactiveT');
}
}
}

function fieldFocus( f ) {
f = f.getElementsByTagName('form')[0];
var el, els = f.elements;
for ( var i=0, j=els.length; i<j; i++ ) {
el = els[i];
if ( 'text' == el.type && el.focus ) {
el.focus();
return;
}
}
}

</script>
<style type="text/css">
body { margin-top: 10px; padding: 0;}
..tabDiv {
position: relative;
float: left;
top: 0px;
height: 5ex;
width: 5em;
border-top: 2px solid #77777B;
border-left: 2px solid #77777B;
border-right: 2px solid #77777B;
margin: 0; padding: 0;
text-align: center;
line-height: 5ex;
}
..bodyDiv {
position: relative;
margin-top: 2px;
top: 5ex;
left: 0;
background-color: #ffffff;
border: 2px solid #77777B;
color: #000000;
z-index: 0;
}
..activeB { position: relative; display: block; }
..inactiveB { position: relative; display: none; }
..activeT {
background-color: #FFFFFF; z-index: 20;
border-bottom: 2px solid #ffffff;
}
..inactiveT {
background-color: #C0C0C0; z-index: 10;
border-bottom: 2px solid #77777B;
}

</style>
</head><body onload="initTabs();">
<div id="tab_0" class="tabDiv">
Tab 0
</div>
<div id="tab_1" class="tabDiv">
Tab 1
</div>
<div id="tab_2" class="tabDiv">
Tab 2
</div>
<!-- content for body 0 -->
<div id="body_0" class="bodyDiv">
<h1>Here is the content for body 0</h1>
<form name="body_0_form" action="">
<input type="text" name="input_0_1"><br>
<select>
<option>opt 0
<option>opt 1
<option>opt 2
</select>
<input type="reset">&nbsp;
<input type="submit">
</form>
</div>
<!-- content for body 1 -->
<div id="body_1" class="bodyDiv">
<h1>Here is the content for body 1</h1>
<form name="body_1_form" action="">
<input type="text" name="input_1_1"><br>
<input type="text" name="input_1_2"><br>
<input type="text" name="input_1_3"><br>
<input type="reset">&nbsp;
<input type="submit">
</form>
</div>
<!-- content for body 2 -->
<div id="body_2" class="bodyDiv">
<h1>Here is the content for body 2</h1>
<form name="body_2_form" action="">
<input type="text" name="input_2_1"><br>
<input type="text" name="input_2_2"><br>
<select>
<option>opt 0
<option>opt 1
<option>opt 2
</select>
<input type="text" name="input_2_3"><br>
<input type="reset">&nbsp;
<input type="submit">
</form>
</div>

</body></html>

--
Rob
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Ben Smeets | last post: by
3 posts views Thread by Eric | last post: by
10 posts views Thread by dale zhang | last post: by
4 posts views Thread by Mad Scientist Jr | last post: by
3 posts views Thread by Jim Devenish | last post: by
reply views Thread by devrayhaan | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.