focus()

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Locked
galt57
Posts: 151
Joined: April 8th, 2005, 9:56 am

focus()

Post by galt57 »

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
a:focus{outline:1px dotted red;}
</style>
</head>

<body>

<h2>In Firefox the first link seems to retain an outline</h2>

<a href="#" id="l1">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>

<h2>Problem is seen in plain Javascript</h2>
<h2>Problem is not seen in Chrome or IE10</h2>

<script>
document.getElementById("l1").focus();
</script>

</body>
</html>
Top
User avatar
DanRaisch
Moderator
Posts: 127240
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: focus()

Post by DanRaisch »

Moving to Web Development.
Top
Dom1953
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Re: focus()

Post by Dom1953 »

First a workaround that seems to fix the problem. Provide a style rule for the link when it doesn't have focus:

Code: Select all

    <style>
    a{outline-style:none;}
    a:focus{outline:1px dotted red;}
    </style>


Secondly a strange observation. The problem was not apparent after opening a window and using document.write() to write the source to it, nor did it appear if the source was supplied using "javascript://" as the scheme. (I use a text area with buttons for quick testing) The problem only appeared after saving the source to disk and opening as file. I have no idea why.
Top
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: focus()

Post by BruceAWittmeier »

I made minor mods. Very strange. Even re-ordering the links, the first l1 is the only one that has the constant outline.

Code: Select all

    <!DOCTYPE html>

    <html lang="en">

    <head>
       <title>title</title>
       <style>
          a:focus{outline:3px dotted red;}
       </style>
    </head>

    <body>

    <h2>In Firefox the first link seems to retain an outline</h2>

    <a href="#" id="l2">link2</a>
    <a href="#" id="l1">link1</a>
    <a href="#">link3</a>

    <a href="#" id="l2">link2</a>
    <a href="#">link1</a>
    <a href="#" id="l3">link3</a>

    <a href="#" id="l2">link1</a>
    <a href="#" id="l3">link3</a>
    <a href="#" id="l1">link2</a>
    
    <h2>Problem is seen in plain Javascript</h2>
    <h2>Problem is not seen in Chrome or IE10</h2>

    <script>
    document.getElementById("l1").focus();
    </script>

    </body>
    </html>
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
Top
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:
Contact patrickjdempsey

Re: focus()

Post by patrickjdempsey »

You cannot have multiple ID's with the same name... browsers will always only pick the first one they discover. ID's should always be unique per page.

Anyway, the root of the problem is likely using that inline anonymous code like that. It probably executes before the page is finished rendering, causing weird problems. You really should wrap that call in a function and then activate the function with an observer such as onload.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
Top
Dom1953
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Re: focus()

Post by Dom1953 »

I tested placing the body script element code into a "load" event listener before posting. This did not affect the lingering outline produced in Firefox. I totally agree attempts to modify the DOM before the load event fires can lead to failure and are to be avoided, but ruled it out as the cause in this case. I'd support calling this a bug with reproducibility affected by the scheme used.
Top
Locked

Return to “Web Development / Standards Evangelism”