document.activeElement 过滤选择文件弹窗导致的页面失焦

书童小二

发布于 2018-09-03 19:29:48

2K0

文章被收录于专栏：前端儿前端儿

在线考试页面，常常需要检测用户是否作弊。一般是监听页面是否失焦的方式，而失焦的方式有很多种，比如QQ弹窗，切换页面，切换程序，input文件上传选择文件等选择文件是正常情况，这种情况下需要过滤

本文很简单，其实就是 document.activeElement 的使用，获取当前页面上的焦点元素

鼠标点击或Tab切换时都可以触发获取

一般是表单input、textarea、select等，此外就是body项

        <input type="text" name="">
        <input type="file" name="">

        <script type="text/javascript">
            window.onblur = function() {
                var elem = document.activeElement;

                console.log(elem);

                if (elem.getAttribute('type') !== 'file') {
                    console.log('blur');
                }
            };
        </script>