利用tabindex属性解决div失去焦点消失的onblur问题

最新推荐文章于 2024-08-04 18:23:42 发布

The_RedMaple

最新推荐文章于 2024-08-04 18:23:42 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/the_redmaple/article/details/121796468

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

原本在JavaScript中是不能直接使用div 的onblur 属性的，但是我们可以利用tabindex 属性来还获取div的onblur 属性

tabindex 属性：当用户使用Tab 键时获取有tabindex属性的对象（如在网站登录经常从账号用Tab键跳到密码选框上，用的就是这个属性，并且这个属性也支持鼠标点击）

tabindex取值：

tabindex = -1 : 排除有该tabindex=-1的元素，无法通过tab键使该元素获取焦点。

tabindex = 0 : tabindex=0的元素获取焦点的优先级排在其他所有具有tabindex值的元素之后。

tabindex = x : x取值1 到 32767，元素按取值的大小，按顺序获取焦点。

实例：

<!doctype html>
<html>
<head>
    <title>当红色div失去焦点时隐藏</title>
</head>
<body>
    <script>
        //创建红色DIV方块
        red = document.createElement('div');
        red.setAttribute('id','red');
        red.setAttribute('tabindex','3');
        red.style.cssText = "width:100px;height:100px;background-color:red;";
        document.body.appendChild(red);        
         
        //创建黄色div方块 
        yellow = document.createElement('div');
        yellow.setAttribute('id','yellow');
        yellow.setAttribute('tabindex','2');
        yellow.style.cssText = "width:100px;height:100px;background-color:yellow;";
        document.body.appendChild(yellow);
         
        //当红色方块失去焦点时隐藏
        let redHide = document.getElementById('red');
        redHide.onblur = function(){
            redHide.style.display = 'none';
        } 
    </script>
</body>
</html>