zoukankan      html  css  js  c++  java
  • 信息无障碍的修复脚本

    很多网站为了去除超链接外面的虚框(非IE很多是实框),在每个超链接标签上面都写上了恶心的
    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)

    是不是很简单啊。
    这段代码对于opera浏览器不兼容,因为opera浏览器本身就不是一个信息无障碍的浏览器,没有视障用户用opera的,大家都来鄙视opera吧。

    平安夜那天早上,晴天反馈说有一些网站不是直接写onfocus事件,而是用attachEvent/addEventListener方式写了恶心的this.blur()。这事咋整呢?没有拿到原来绑定上面的函数句柄,就不能detachEvent啊。最终想了一个跟blur差不多一样恶心的hack:
    <html>
     <head>
     
    <body>
      
    <href="#" onclick="alert('click1')">test1</a>
      
    <href="http://www.qq.com/" >qq</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>

    这样可以解决大部分类似这样的问题,也可以代替上面的方案,不过有一些副作用。考虑到大多数情况下超链接标签内部的内容结构都比较简单,也不会有太多的内部事件绑定的情况,这段代码应该可以应付大多数情形了。
  • 相关阅读:
    Java应用开发与实践
    大话存储:存储系统底层架构原理极限剖析(终极版)
    Excel 2016公式与函数应用大全
    Excel高效办公应用技巧
    业务弯路池子
    一个现象,
    为什么有时候 进入这么多次,一次是 38次,一次是 114次,
    恶心 从判断开始,
    but,
    这两个的意思是不同的。。。
  • 原文地址:https://www.cnblogs.com/stonehuang/p/6603188.html
Copyright © 2011-2022 走看看