MozillaZine

focus()

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

Post Posted April 16th, 2015, 10:24 am

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>

DanRaisch
Moderator

User avatar
 
Posts: 118005
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted April 16th, 2015, 3:02 pm

Moving to Web Development.

Dom1953
 
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Post Posted April 16th, 2015, 4:09 pm

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.

BruceAWittmeier

User avatar
 
Posts: 2625
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted April 26th, 2015, 10:24 am

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'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted April 26th, 2015, 8:21 pm

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/

Dom1953
 
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Post Posted April 28th, 2015, 4:12 pm

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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 2 guests