很多網站為了去除超鏈接外面的虛框(非IE很多是實框),在每個超鏈接標簽上面都寫上了惡心的
onfocus="this.blur()"
這樣就導致整個網站人為的變成有障礙網站了,任何無法使用鼠標的用戶也就無法正常使用這個網站,因為鍵盤不能聚焦到超鏈接上。
修復這個問題很簡單,用hideFocus或者style="outine:none"來代替onfocus="this.blur()"就好了,但是有的時候網站頁面太多,全站修改代價就大了。這種情況下可以在網站的模板或者通用腳本上面插入以下一段腳本來解決問題:
是不是很簡單啊。
這段代碼對于opera瀏覽器不兼容,因為opera瀏覽器本身就不是一個信息無障礙的瀏覽器,沒有視障用戶用opera的,大家都來鄙視opera吧。
平安夜那天早上,晴天反饋說有一些網站不是直接寫onfocus事件,而是用attachEvent/addEventListener方式寫了惡心的this.blur()。這事咋整呢?沒有拿到原來綁定上面的函數句柄,就不能detachEvent啊。最終想了一個跟blur差不多一樣惡心的hack:
這樣可以解決大部分類似這樣的問題,也可以代替上面的方案,不過有一些副作用。考慮到大多數情況下超鏈接標簽內部的內容結構都比較簡單,也不會有太多的內部事件綁定的情況,這段代碼應該可以應付大多數情形了。
onfocus="this.blur()"
這樣就導致整個網站人為的變成有障礙網站了,任何無法使用鼠標的用戶也就無法正常使用這個網站,因為鍵盤不能聚焦到超鏈接上。
修復這個問題很簡單,用hideFocus或者style="outine:none"來代替onfocus="this.blur()"就好了,但是有的時候網站頁面太多,全站修改代價就大了。這種情況下可以在網站的模板或者通用腳本上面插入以下一段腳本來解決問題:
setTimeout(
(function(){
var a=document.getElementsByTagName("A");
var regBlur=/^function ((anonymous)|(onfocus))?\((event)?\)\s*\{\s*(this\.)?blur\(\);?\s*\}$/;
var isIE=("\v"=="v");
for(var i=0;i<a.length;i++){
if(regBlur.test(a[i].onfocus)){
if(isIE){
a[i].hideFocus="true";
}else{
a[i].style.outline="none"
}
a[i].onfocus=null;
}
}
}),1000)
(function(){
var a=document.getElementsByTagName("A");
var regBlur=/^function ((anonymous)|(onfocus))?\((event)?\)\s*\{\s*(this\.)?blur\(\);?\s*\}$/;
var isIE=("\v"=="v");
for(var i=0;i<a.length;i++){
if(regBlur.test(a[i].onfocus)){
if(isIE){
a[i].hideFocus="true";
}else{
a[i].style.outline="none"
}
a[i].onfocus=null;
}
}
}),1000)
是不是很簡單啊。
這段代碼對于opera瀏覽器不兼容,因為opera瀏覽器本身就不是一個信息無障礙的瀏覽器,沒有視障用戶用opera的,大家都來鄙視opera吧。
平安夜那天早上,晴天反饋說有一些網站不是直接寫onfocus事件,而是用attachEvent/addEventListener方式寫了惡心的this.blur()。這事咋整呢?沒有拿到原來綁定上面的函數句柄,就不能detachEvent啊。最終想了一個跟blur差不多一樣惡心的hack:
<html>
<head>
<body>
<a href="#" onclick="alert('click1')">test1</a>
<a href="http://www.qq.com/" >qq</a>
<a href="http://www.baidu.com/" >baidu</a>
<script type="text/javascript">
<!--
var ls=document.links;
//這是原來讓鏈接不能聚焦的代碼
for(var i=0;i<ls.length;i++){
ls[i].attachEvent("onfocus",function(){this.blur()})
}
//這是讓鏈接重新可以聚焦的代碼
for(var i=0;i<ls.length;i++){
var a=document.createElement("A");
a.innerHTML=ls[i].innerHTML;
ls[i].innerHTML="";
ls[i].appendChild(a);
a.tabIndex=0;
ls[i].tabIndex=-1;
}
//-->
</script>
</body>
</html>
<head>
<body>
<a href="#" onclick="alert('click1')">test1</a>
<a href="http://www.qq.com/" >qq</a>
<a href="http://www.baidu.com/" >baidu</a>
<script type="text/javascript">
<!--
var ls=document.links;
//這是原來讓鏈接不能聚焦的代碼
for(var i=0;i<ls.length;i++){
ls[i].attachEvent("onfocus",function(){this.blur()})
}
//這是讓鏈接重新可以聚焦的代碼
for(var i=0;i<ls.length;i++){
var a=document.createElement("A");
a.innerHTML=ls[i].innerHTML;
ls[i].innerHTML="";
ls[i].appendChild(a);
a.tabIndex=0;
ls[i].tabIndex=-1;
}
//-->
</script>
</body>
</html>
這樣可以解決大部分類似這樣的問題,也可以代替上面的方案,不過有一些副作用。考慮到大多數情況下超鏈接標簽內部的內容結構都比較簡單,也不會有太多的內部事件綁定的情況,這段代碼應該可以應付大多數情形了。