Remove the dotted box of links or buttons on the webpage

Original article: http://wangye.org/blog/archives/70/

A dotted box is often displayed when you click a link or button with the mouse. Many friends often want to remove this indecent dotted box, but I personally think it is better to be cautious when removing the dotted box, why? When you remove the dotted box, it looks a lot more beautiful on the surface. When you click the link or button with the mouse, it is refreshing, but it also brings about a reduction in accessibility and ease of use, why do you say this? Some children's shoes are used to quickly locate and access related links or buttons on the keyboard. After you remove the dotted box, this means that these objects may not be able to obtain the focus, or the viewer may not be able to perceive the existence of the focus, and of course they cannot be located. We can't simply do websites, but there are many issues to consider when doing Web pages. In particular, it is often difficult to achieve accessibility. If you really want to remove the dotted box without losing access, the solution can consider adding the accesskey attribute. Of course, some annotations or prompts can be added next to it to allow visitors to access these objects that cannot be focused by using shortcuts.

The following describes how to remove the dotted box.

1. The outline attribute of the CSS style sheet (recommended by browsers such as ie9 and ff)

For the latest ie9 browser and Firefox, you can use outline: none to remove the dotted box. Of course, you can also write-moz-outline: none in ff.

 
A: Focus {outline: none;-moz-outline: none ;}
 

2. The hidefocus = true attribute of IE (recommended for IE8 and earlier versions)

For ie browsers earlier than ie9, we can use the hidefocus method, for example:

<A Href="Index.PHP"Hidefocus="True"> </A>
 

3. This. Blur ();

This method works better, but it does not feel semantic. The principle is to remove the focus when getting the focus.

 
<A Href="Index. php" Onfocus="This. Blur ();"></A> 
 

Well, we have introduced these three methods. Next we can integrate them based on different situations. For example, if it is ie9 or FF, browsers will adopt the CSS outline method. In other cases, try using the hidefocus or this. Blur () method. The JavaScript method can be traversed.
 

 
VaR anchors = document. getelementsbytagname ('A'); For (VAR I = 0; I <anchors. length; I ++) {anchors [I]. hidefocus = true;} // or use this. blur () method, such as writing var anchors = document as follows. getelementsbytagname ('A'); For (VAR I = 0; I <anchors. length; I ++) {anchors [I]. onfocus = function () {This. blur ();}}
 

The disadvantage of the above method is that it traverses all the link labels, and some links may still want to have dotted boxes. How can we only remove the dotted boxes for the specified links? For ie9, FF, chrome, Safari, and other browsers, we can still remove them in the form of outline: None. Of course, we can define a specified CSS style, such as. hidefocus, as shown below:

 
. Hidefocus: Focus {outline: none;-moz-outline: none ;}
 

Then, we can use <a class = "hidefocus" href = "index. php"> link text </a> to remove the dotted box of the link. What should I do for IE browsers earlier than ie9? In fact, we can traverse the link where class is hidefocus and then remove hidefocus or this. Blur.
The getelementsbyclassname method is used to traverse the class, but it is a pity that ie9 does not support this method below. Of course, some people have written a fully compatible version of getelementsbyclassname. You can refer to a getelementsbyclassname version I found.

After the getelementsbyclassname method is introducedCodeYou can insert a script in this way.

 
<! -- [If lt ie 9]> <SCRIPT type = "text/JavaScript"> adddomloadevent (function () {var anchors = getelementsbyclassname ('hidestoc '); for (VAR I = 0; I <anchors. length; I ++) {anchors [I]. hidefocus = true ;}}); </SCRIPT> <! [Endif] -->
 

Here, adddomloadevent can be referred to "use domcontentloaded to replace some windows. onLoad". For more information about if lt ie 9 conditions, see "how to set style time zones in different versions of IE". In this way, this script sets the. hidefocus = true attribute for the class of ie9 and the following browsers, and works with CSS outline: None, which is basically perfect.

-----------------------------------------------------------

Update 2012-12-25

ArticleHttp://www.mikesmullin.com /? P = 23 & replytocom = 8803 # respond describes the keyboard and mouse methods.

 <  Script   Type = "Text/JavaScript"  > //<! -- Var runonload = new array (); // For queuing multiple onload event functionswindow. onload = function () {for (VAR I = 0; I <runonload. length; I ++) runonload [I] ()} // hide dotted: focus outlines when mouse is used // but not when Tab key is usedif (document. getelementsbytagname) for (var I in a = document. getelementsbytagname ('A') {A [I]. onmousedown = function () {This. blur (); // Most browsers this. hidefocus = true; // ie This. style. outline = 'none'; // Mozilla} A [I]. onmouseout = A [I]. onmouseup = function () {This. blur (); // Most browsers this. hidefocus = false; // ie This. style. outline = NULL; // Mozilla }}// -->  </  Script  >