/    Sign up×
Community /Pin to ProfileBookmark

body onfocus with div

When I click the screen in div A focus moves to the text box.

When I click Stay A focus moves to that button.

QUESTION: When I move to div B, I need to disable the body focus. When I move back to div A, need to reset it.


**************************************

<script type=”text/javascript”>

function gotoDivA()
{
document.getElementById(‘A’).style.display = ‘block’;
document.getElementById(‘B’).style.display = ‘none’;
}

function gotoDivB()
{
document.getElementById(‘B’).style.display = ‘block’;
document.getElementById(‘A’).style.display = ‘none’;
}

</script>

<body onfocus=”document.getElementById(‘enterhere’).focus();”>

<div id=”A”>
You are in A
<br><br>
<input type=”button” value=”To B” onClick=”gotoDivB()”>
<br><br>
<input type=”button” value=”Stay A” onClick=”gotoDivA()”>
<br><br>
<input type=”text” id=”enterhere” size=10>
</div>

<div id=”B” style=”display:none”>
You are in B
<br><br>
<input type=”button” value=”To A” onClick=”gotoDivA()”>

</div>

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@magar136Feb 16.2006 — First you sould give and id to the body:

<body id="TheBody" onfocus="...">

Second,

if you want to desactivate the focus:

document.getElementById( 'TheBody' ).setAttribute( 'onfocus' , '' );

- or -

document.getElementById( 'TheBody' ).onfocus = "";

if you want to activate the focus:

document.getElementById( 'TheBody' ).setAttribute( 'onfocus' , "document.getElementById('enterhere').focus()" );

- or -

document.getElementById( 'TheBody' ).onfocus = "document.getElementById('enterhere').focus()";

This should work.

Maxime Garceau
Copy linkTweet thisAlerts:
@swtransauthorFeb 16.2006 — This gets rid of the error when I go from A to B. Once focus is lost on the body (by going from A to B, then back to A; and/or by pushing Stay A), when the body is clicked in A, it focus does not move to the text box.


-------------------------------------

<script type="text/javascript">

function gotoDivA()

{

document.getElementById('A').style.display = 'block';

document.getElementById('B').style.display = 'none';

document.getElementById( 'TheBody' ).onfocus = "document.getElementById('enterhere').focus()";

}

function gotoDivB()

{

document.getElementById('B').style.display = 'block';

document.getElementById('A').style.display = 'none';

document.getElementById( 'TheBody' ).onfocus = "";

}

</script>

<body id="TheBody" onfocus="document.getElementById('enterhere').focus();">

<div id="A">

You are in A

<br><br>

<input type="button" value="To B" onClick="gotoDivB()">

<br><br>

<input type="button" value="Stay A" onClick="gotoDivA()">

<br><br>

<input type="text" id="enterhere" size=10>

</div>

<div id="B" style="display:none">

You are in B

<br><br>

<input type="button" value="To A" onClick="gotoDivA()">

</div>
Copy linkTweet thisAlerts:
@magar136Feb 16.2006 — I've tried it home under Firefox, and all is working very fine.

It does exactly what you wanted to do, except that the Stay A button give the focus to the textbox and not the button.


Maxime Garceau
Copy linkTweet thisAlerts:
@swtransauthorFeb 16.2006 — This seems to work in explorer. Thanks again.

<head>

<script type="text/javascript">

function startIt()

{ gotoDivA();

}

function txtFocus()

{ if (document.getElementById('A').style.display == 'block')

document.getElementById('enterhere').focus();

}

function gotoDivA()

{ document.getElementById('A').style.display = 'block';

document.getElementById('B').style.display = 'none';

}

function gotoDivB()

{ document.getElementById('B').style.display = 'block';

document.getElementById('A').style.display = 'none';

}

</script>

</head>

<body onfocus="txtFocus()">

<div id="A">

You are in A

<br><br>

<input type="button" value="Start" onClick="startIt()">

<br><br>

<input type="button" value="To B" onClick="gotoDivB()">

<br><br>

<input type="button" value="Stay A" onClick="gotoDivA()">

<br><br>

<input type="text" id="enterhere" size=10>

</div>

<div id="B" style="display:none">

You are in B

<br><br>

<input type="button" value="To A" onClick="gotoDivA()">

</div>

</body>
×

Success!

Help @swtrans spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...