Set focus to a div

marss · Mar 19, 2008

Hi marss

That doesn't work even in Firefox or IE, when I try it - please could
you see if I am doing something wrong? See my mock-up athttp://tinyurl.com/2luac4,
which uses your suggested method but doesn't work in IE or Firefox, as
opposed to my original mock-up athttp://tinyurl.com/3bxktgwhich does
at least work in those two browsers.

Dave

Hi Dave

This is an example how test results depend on the test environment

When I tested I saved this page ( http://tinyurl.com/3bxktg ) using
IE.
It did not save any additional files (stylesheet, images).

In this case scrollIntoView method works properly.
Moreover I just found that focus method also works properly.
In the every browser you mentioned above.

Test example: http://marss.co.ua/temp/test.htm

So, javascript is not guilty

. The problem appeares at the moment
you attach the stylesheet.
You have to analyse in this direction, maybe rework stylesheet.

Regards,
Mykola
http://marss.co.ua - Casual ideas for web development

Thomas 'PointedEars' Lahn · Mar 19, 2008

Dave said:
But is there any way of setting focus to a div when a webpage loads
that is cross-browser compatible?

Click to expand...

Apparently not. However, I double-checked your observations and could not
confirm them for Safari 3.0.4 beta (523.15), at least not with
document.links[0].focus().

Click to expand...

document.getElementById('idname').focus() doesn't work with Safari,

That depends on what `idname' would refer to. It works fine if "idname" is
the ID of a link object, for example. [This was tested only in Safari 3.1
(525.13) on Windows XP though, released today.]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Focusing A Link On Load</title>
</head>

<body onload="document.getElementById('foo').focus()">
<h1>Focusing A Link On Load</h1>
<a href="" id="foo">bar</a>
</body>
</html>

URI:
data:text/html;charset=ISO-8859-1,%3C%21DOCTYPE%20html%20PUBLIC%20%22-//W3C//DTD%20HTML%204.01%20Transitional//EN%22%0A%20%20%22http%3A//www.w3.org/TR/html4/loose.dtd%22%3E%0A%3Chtml%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22Content-Type%22%20content%3D%22text/html%3B%20charset%3DISO-8859-1%22%3E%0A%20%20%20%20%3Ctitle%3EFocusing%20A%20Link%20On%20Load%3C/title%3E%0A%20%20%3C/head%3E%0A%0A%20%20%3Cbody%20onload%3D%22document.getElementById%28%27foo%27%29.focus%28%29%22%3E%0A%20%20%20%20%3Ch1%3EFocusing%20A%20Link%20On%20Load%3C/h1%3E%0A%20%20%20%20%3Ca%20href%3D%22%22%20id%3D%22foo%22%3Ebar%3C/a%3E%0A%20%20%3C/body%3E%0A%3C/html%3E

but you're right that document.links[0].focus() does work with Safari
(but it doesn't work with Opera) - thanks.

You are welcome.

Can you think of any way of fooling Opera into working properly?
No.

After all if I go to Google in Opera, the keyboard focus is in the search
box, so one would have thought what I'm trying to achieve must be
possible?

They do it with

function sf(){document.f.q.focus()}

whereas `document.f.q' proprietarily (instead of the standards-compliant as
well as backwards-compatible `document.forms["f"].elements["q"]') refers to
(pretty-printed)

<form action="/search" name=f><table cellpadding=0 cellspacing=0>
...
<input maxlength=2048 name=q size=55 title="Google Search" value="">

But AFAICS, Google Web Search does not use scrollable `div' elements. As I
pointed out, it is entirely possible in Opera (9.26) to focus elements on
load, but that does not appear to enable keyboard scrolling of scrollable
block elements.

In fact, with this approach Google prevents people from using the
keyboard for scrolling even though there is no scrollable `div' element.
They can only hope for people without pointing devices to have their
viewport large enough. And at least in Opera you can't tab to the links
below the form. Incidentally, Google code is known around here not to be
suitable as a reference for designing Web applications, to say the least.

PointedEars

Dave Rado · Mar 21, 2008

Hi Thomas

document.getElementById('idname').focus() doesn't work with Safari,

Click to expand...

That depends on what `idname' would refer to. It works fine if "idname" is
the ID of a link object, for example. [This was tested only in Safari 3.1
(525.13) on Windows XP though, released today.]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Focusing A Link On Load</title>
</head>

<body onload="document.getElementById('foo').focus()">
<h1>Focusing A Link On Load</h1>
<a href="" id="foo">bar</a>
</body>
</html>

That works great, except that in Safari and Opera the dummy link gets
highlighted with a distracting blue box, and in Firefox it displays
the
url of the current webpage in the the status bar which looks
distracting. I
presume there's no way round this? If not I think I'll go back to my
original method and just live with it not working in Safari. I can
always
provide an alternative stylesheet for users who can't live with having
to click on the page before being able to scroll with the keyboard.
Pity,
though ...

Incidentally, Google code is known around here not to be
suitable as a reference for designing Web applications, to say the least.

Weird, I thought they were meant to be into standards-compliance.

Dave

Thomas 'PointedEars' Lahn · Mar 21, 2008

Dave said:
document.getElementById('idname').focus() doesn't work with Safari,

Click to expand...

That depends on what `idname' would refer to. It works fine if "idname" is
the ID of a link object, for example. [This was tested only in Safari 3.1
(525.13) on Windows XP though, released today.]
[...]

Click to expand...

That works great, except that in Safari and Opera the dummy link gets
highlighted with a distracting blue box, and in Firefox it displays
the
url of the current webpage in the the status bar which looks
distracting.

What you call distracting is the only way for someone navigating with the
keyboard to determine what the currently active element is.

I presume there's no way round this?

I hope there is none.

If not I think I'll go back to my
original method and just live with it not working in Safari.

That is illogical. The focused link will be highlighted in other user
agents, too. And that is good so.

I can
always
provide an alternative stylesheet for users who can't live with having
to click on the page before being able to scroll with the keyboard.
Nonsense.

Pity,
though ...

Not at all.

BTW, please do not manually wrap lines if you use a posting agent that uses
automatic line wrapping, and you are not sure where the print margin is. As
you can see here, your postings become a PITA to read otherwise.

Weird, I thought they were meant to be into standards-compliance.

If that were the case,
http://validator.w3.org/check?verbose=1&ss=1&uri=http://www.google.com/
would not look like it does, for a start.

PointedEars

How to make a div select work?	5	Jan 13, 2022
Clickable Div Block	1	Oct 13, 2023
New coder with a focus on animating web banners	0	Dec 15, 2022
Trying to add text into an editable div that is in an iframe	0	Dec 15, 2022
How to set focus to a div?	1	Feb 28, 2008
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Set value after clicking in field	11	May 9, 2023
Pressing Tab to Focus on <div>	3	Jul 21, 2008

Set focus to a div

marss

Thomas 'PointedEars' Lahn

Dave Rado

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads