document.activeElement 过滤选择文件弹窗导致的页面失焦
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了document.activeElement 过滤选择文件弹窗导致的页面失焦相关的知识，希望对你有一定的参考价值。
在线考试页面，常常需要检测用户是否作弊。
一般是监听页面是否失焦的方式，而失焦的方式有很多种，比如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>
过滤了文件选择导致的弹窗，这个属性的支持度还是可以的
不过，用JS检测是否为QQ弹窗，目前来说还是行不通的，只好提示用户在考试之前关闭相关可能会弹窗的应用
以上是关于document.activeElement 过滤选择文件弹窗导致的页面失焦的主要内容，如果未能解决你的问题，请参考以下文章
用document.activeElement解决iframe跨域问题