473,395 Members | 1,623 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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 2633
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Ben Smeets | last post by:
Hi folks, Have been trying to figure out a solution for the following problem by reading lots of threads here, but doesn't work out. Hope someone can help me. I have a parent window which...
3
by: Eric | last post by:
Hi, I wrote a Sub to run "Find and Replace" menu command on Access 2000. It worked fine except SetFocus didn't work. It changed position from time to time. I need the Focus always set at field...
2
by: Johann Blake | last post by:
The following is a bug I have discovered using tab pages and threads and I am looking for a workaround. Create a new Windows Forms application and add a tab control with two tab pages. Add a...
10
by: dale zhang | last post by:
Hi, I saw the post here about setfocus. But they are for web form. Web control page HTML does not have form1. the Jscript there does not work here. My question is how to set focus to the...
4
by: Mad Scientist Jr | last post by:
i am trying to set focus to a specific control depending on the outcome of a validator control and it is not working. none of these methods are working to setfocus: 1....
4
by: AA Arens | last post by:
I use SetFocus to jump from one field to another. That works fine. But one of the focussed fields has default text and this text is selected and the cursor is on the left of it. How to have the...
3
by: Jim Devenish | last post by:
In my application vehicles arrive and depart from a workshop. The ArrivalDate and the HandoverDate are each entered. Sometimes the person who should enter the arrival date forgets to do so. ...
0
by: srinivasarao yarru | last post by:
hi sir, in access 2003 how we can use the setfocuse property(we have to lostfocuse from one field with in that we have to setfocuse in same field) i am using this code but not setfocuse...
3
by: srinivasarao yarru | last post by:
hi in access 2003 how we can use the setfocuse property(we have to lostfocuse from one field with in that we have to setfocuse in same field) i am using this code but not setfocuse to same field...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.