Keyboard focus outline, browser Back button, onmouseup and blur

JavaScript
1

This is a really basic question: what does blur mean, or what does it do when used in links as described below?

I’ve tested it on Firefox 3.6 and Opera 11 and it behaves as I hope except for one thing. During testing if I use both keyboard and mouse to navigate within the same session, the browser history for the ‘other’ method is wiped out; it won’t go backwards beyond the most recently used method.
Is this not a surprise when you know what blur really means?

I want the following (assuming Javascript is enabled):
a) Keyboard users to see a focus outline on navigation links.
b) Keyboard users to see the outline still there if they use the browser Back button, and continue tabbing from that link onwards.
c) Mouse users to NOT see an outline if they use the browser Back button.

I don’t know JavaScript and the following is simple for me to implement.

html (for the top and side nav):

<div id="topnav"><div class="nav">
<em title="Current section">Introduction</em>
<a href="../foldername/filename.html" onmouseup="this.blur();">Section name</a>
...etc </div></div>

<div id="sidenav"><div class="nav">
<em title="Current page">Intro page name</em>
<a href="filename2.html" onmouseup="this.blur();">Intro section page 2 name</a>
...etc </div></div>

css (concentrating on just the outline, the navigation background colour is a very light grey):

div.nav a {text-decoration: none; outline: 0; color: #321; background: transparent;  }
div.nav a:link, div.nav a:visited, div.nav a:active { outline:0}
div.nav a:focus { outline: 2px dotted #005; }
div.nav a:hover { color: #ffe; background: #005; outline:0 }

div.nav em { font-style: normal; color: #f40; background: #ffe; }

Thank you for any help.

2

The blur event originally started with form fields. When you click (or navigate) to a field, the focus event triggered for that field. When you left the field the blur event for that field would trigger. So you gain focus when the field is active, and the blur event is when the field loses focus.

So blur is a play-on-words, to provide a meaningful focus/blur event pair.

With links, a similar story applies. An active link currently has the focus. The blur event causes that link to lose focus.

3

Thank you Paul for taking the time to reply - blur means what I thought.

I’ve read that in-line code is ‘old hat’ and should not be used. I wondered if it might be reason the browser history is lost when using a mixture of keyboard and mouse for link navigation.

I shouldn’t implement something I don’t fully understand, so that’s my next decision!

4

It’s not just old-hat, it’s wasteful and confusing too.

Do you remember the bad-old-days of this sort of code?


<div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
    <div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
        <span id="get-stuff" onclick="callSomeFunction()">News</span>
    </div>
</div>

Problems include:

[list][]the html page is much larger
[]no caching
[]horrible accessibility
[]need to edit every page that contains the code
[/list]

We learned out lesson early on with CSS and moved the inline styles out to a separate file. That allowed the CSS file to be cached, and removed from HTML page results in the HTML page being lighter, and the presentation is easier to manage due to only needing to edit the external CSS file.

The same issues exist with scripting too.[/QUOTE]

5

I did try to cobble together a ‘proper’ solution using an external js file, but obviously it was way beyond me.

A focus outline for mouse users is not a big issue in the scheme of things. I might get the courage to ask for a code review in another thread for something I would like to implement… we’ll see.