Databases
StackOverflow2013
Postsdbo
POFirefox - hiding focus highlight when not on an input control
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFirefox - hiding focus highlight when not on an input control
    text
    copied!<p>We have a requirement whereby a page can consist of a form with several sections. Sections can be added or removed. After the user chooses to add a section the form is submitted and a new page returned with the new section added. The browser should scroll to the top of the new section. This is fine and I have a generic jquery "scroll to anchor" solution working. However, in addition to simply setting <code>window.location()</code>, I also need to ensure that for keyboard users, hitting tab will take them to the next field after the anchor point. I'm using the solution to this <a href="https://stackoverflow.com/questions/10593111/focus-on-textarea-based-from-anchor-link">question</a> to do this.</p> <p>This works fine in IE 8/9 but in firefox(15), I'm seeing a little focus square being rendered where the anchor tag is. I would like to suppress this, I tried setting <code>display:none</code> but of course this stops the scroll working. I tried to create a <a href="http://jsfiddle.net/7egKz/1/" rel="nofollow noreferrer">fiddle</a> but jsFiddle doesn't demonstrate the problem as the fddle site itself is interfering with the focus setting - but the same code in the same browser running locally does.</p> <p>here's a reduced version of my code that demonstrates the problem.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;test scroll&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;div&gt;Blah&lt;/div&gt; &lt;div&gt; &lt;label for="a"&gt;Section 1: &lt;input id="a" type="text" /&gt;&lt;/label&gt; &lt;/div&gt; &lt;a id="scrollToAnchorSection2"&gt;&lt;/a&gt; &lt;div&gt; &lt;label for="b"&gt;Section 2: &lt;input id="b" type="text" /&gt;&lt;/label&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and my jquery</p> <pre><code>$(document).ready(function() { /* Find any "scroll to anchors" that have been set */ var anchors = $('[id*=scrollToAnchor]:first'); if (anchors.length == 1) { window.location = "#" + anchors.attr("id"); // Set tab position anchors.attr("tabindex", -1).focus(); } }); </code></pre> <p>and css</p> <pre><code>div { margin-left:5em; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload