zoukankan      html  css  js  c++  java
  • 深入理解javascript中的焦点管理

    前面的话

      焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就javascript中的焦点管理作详细介绍

    焦点元素

      到底哪些元素可以获得焦点呢?默认情况下,只有表单元素可以获得焦点。因为只有表单元素可以交互

    <input type="text" value="223">

       让非表单元素获得焦点也是有办法的,先将tabIndex属性设置为-1,再调用focus()方法

    <div id="test" style="height:30px;100px;background:lightgreen">div</div>
    <button id="btn">div元素获得焦点</button>
    <script>
    btn.onclick = function(){
        test.tabIndex = -1;
        test.focus();    
    }
    test.onfocus = function(){
        this.style.background = 'pink';
    }
    </script>

    activeElement

      document.activeElement属性用于管理DOM焦点,保存着当前获得焦点的元素

      [注意]该属性IE浏览器不支持

    <div id="test" style="height:30px;100px;background:lightgreen">div</div>
    <button id="btn">div元素获得焦点</button>
    <script>
    console.log(document.activeElement);//<body>
    btn.onclick = function(){
        console.log(document.activeElement);//<button>
        test.tabIndex = -1;
        test.focus();    
        console.log(document.activeElement);//<div>
    }
    </script>

    获得焦点

      元素获得焦点的方式有4种,包括页面加载、用户输入(按tab键)、focus()方法和autofocus属性

    【1】页面加载

      默认情况下,文档刚刚加载完成时,document.activeElement中保存的是body元素的引用。文档加载期间,document.activeElement的值为null

    <script>
    console.log(document.activeElement);//null
    </script>
    <body>
    <script>
    console.log(document.activeElement);//<body>
    </script>
    </body>

    【2】用户输入(按tab键)

      用户通常可以使用tab键移动焦点,使用空格键激活焦点。比如,如果焦点在一个链接上,此时按一下空格键,就会跳转到该链接

      说到tab键,就不能不提到tabindex属性。tabindex属性用来指定当前HTML元素节点是否被tab键遍历,以及遍历的优先级

      1、如果tabindex=-1,tab键跳过当前元素

      2、如果tabindex=0,表示tab键将遍历当前元素。如果一个元素没有设置tabindex,默认值就是0

      3、如果tabindex大于0,表示tab键优先遍历。值越大,就表示优先级越小

      下列代码中,使用tab键时,button获得焦点的顺序是2、5、1、3

    <div id="box">
        <button tabindex= "3">1</button>
        <button tabindex= "1">2</button>
        <button tabindex= "0">3</button>
        <button tabindex= "-1">4</button>
        <button tabindex= "2">5</button>    
    </div>
    <script>
    box.onkeyup = function(){
        document.activeElement.style.background = 'pink';
    }
    </script>

    【3】focus()

      focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件

      [注意]前面介绍过,若非表单元素,设置为tabIndex为-1,也可以获取焦点

    <span id="test1" style="height:30px;100px;">span</span>
    <input id="test2" value="input">
    <button id="btn1">span元素获得焦点</button>
    <button id="btn2">input元素获得焦点</button>
    <script>
    btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
    btn2.onclick = function(){test2.focus();}
    </script>

    【4】autofocus

      HTML5表单字段新增了autofocus属性,只要设置这个属性,不用javascript就能自动把焦点移动到相应字段 

      [注意]该属性只能用于表单元素,普通元素即使设置tabIndex="-1"也不生效

    <input autofocus value="abc">

    hasFocus()

      document.hasFocus()方法返回一个布尔值,表示当前文档之中是否有元素被激活或获得焦点。通过检测文档是否获得了焦点,可以知道是不是正在与页面交互

    console.log(document.hasFocus());//true
    //在两秒钟内点击其他标签页,使焦点离开当前页面
    setTimeout(function(){
        console.log(document.hasFocus());//false
    },2000);

    失去焦点

      如果使用javascript使元素失去焦点,那么就要使用blur()方法

      blur()方法的作用是从元素中移走焦点。在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已

    <input id="test" type="text" value="123">
    <button id="btn1">input元素获得焦点</button>
    <button id="btn2">input元素失去焦点</button>
    <script>
    btn1.onclick = function(){test.focus();}
    btn2.onclick = function(){test.blur();}
    </script>

    焦点事件

      焦点事件会在页面获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及 document.activeElement属性配合,可以知晓用户在页面上的行踪

      焦点事件共包括下面4个

    blur

      blur事件在元素失去焦点时触发。这个事件不会冒泡

    focus

      focus事件在元素获得焦点时触发。这个事件不会冒泡

    focusin

      focusin事件在元素获得焦点时触发。这个事件与focus事件等价,但它冒泡

    focusout

      focusour事件在元素失去焦点时触发。这个事件与blur事件等价,但它冒泡

      [注意]关于focusin和focusout事件,除了IE浏览器支持DOM0级事件处理程序,其他浏览器都只支持DOM2级事件处理程序

    <div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">
        <div id="boxIn" style="height: 50px; 50px;background-color:pink;">123</div>
    </div>
    <button id="btn1">内容为123的div元素获取焦点</button>
    <button id="btn2">内容为123的div元素失去焦点</button>
    <button id="reset">还原</button>
    <script>
    reset.onclick = function(){history.go();}
    //focus()方法
    btn1.onclick = function(){
        boxIn.tabIndex= -1;
        boxIn.focus();
    }
    //blur()方法
    btn2.onclick = function(){
        boxIn.blur();
    }
    //focusin事件
    if(boxIn.addEventListener){
        boxIn.addEventListener('focusin',handler)    
    }else{
        boxIn.onfocusin = handler;
    }
    function handler(){
        this.style.backgroundColor ='lightblue';
    }
    if(box.addEventListener){
        box.addEventListener('focusin',handler)    
    }else{
        box.onfocusin = handler;
    }    
    //blur事件
    function fnBlur(){
        this.style.backgroundColor = 'orange';
    }
    boxIn.onblur = fnBlur;
    box.onblur = fnBlur;
    </script>

      由运行结果可知,focusin事件可冒泡;而blur事件不可冒泡

      焦点事件常用于表单展示及验证

      比如,获取焦点时,修改背景颜色;失去焦点时,还原背景颜色并验证

    <div id="box">
        <input id="input1" type="text" placeholder="只可以输入数字">
        <input id="input2" type="text" placeholder="只可以输入汉字">    
        <span id="tips"></span>
    </div>
    <script>
    if(box.addEventListener){
        box.addEventListener('focusin',fnIn);
        box.addEventListener('focusout',fnOut);
    }else{
        box.onfocusin = fnIn;
        box.onfocusout = fnOut;
    }
    function fnIn(e){
        e = e || event;
        var target = e.target || e.srcElement;
        target.style.backgroundColor = 'lightgreen';
    }
    function fnOut(e){
        e = e || event;
        var target = e.target || e.srcElement;
        target.style.backgroundColor = 'initial';
        //如果是验证数字的文本框
        if(target === input1){
            if(!/^d*$/.test(target.value.trim())){
                target.focus();
                tips.innerHTML = '只能输入数字,请重新输入'
                setTimeout(function(){
                    tips.innerHTML = ''
                },500);
            }
        }
        //如果是验证汉字的文本框
        if(target === input2){
            if(!/^[u4e00-u9fa5]*$/.test(target.value.trim())){
                target.focus();
                tips.innerHTML = '只能输入汉字,请重新输入'
                setTimeout(function(){
                    tips.innerHTML = ''
                },500);
            }
        }    
    }
    </script>

  • 相关阅读:
    1144 The Missing Number (20分)
    1145 Hashing
    1146 Topological Order (25分)
    1147 Heaps (30分)
    1148 Werewolf
    1149 Dangerous Goods Packaging (25分)
    TypeReference
    Supervisor安装与配置()二
    谷粒商城ES调用(十九)
    Found interface org.elasticsearch.common.bytes.BytesReference, but class was expected
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/5874447.html
Copyright © 2011-2022 走看看