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

时间:2023-02-14 19:08:29

在线考试页面,常常需要检测用户是否作弊。

一般是监听页面是否失焦的方式,而失焦的方式有很多种,比如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>

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

过滤了文件选择导致的弹窗,这个属性的支持度还是可以的

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

不过,用JS检测是否为QQ弹窗,目前来说还是行不通的,只好提示用户在考试之前关闭相关可能会弹窗的应用

document.activeElement 过滤选择文件弹窗导致的页面失焦的更多相关文章

  1. python pandas合并多个excel&lpar;xls和xlsx&rpar;文件(弹窗选择文件夹和保存文件)

    # python pandas合并多个excel(xls和xlsx)文件(弹窗选择文件夹和保存文件) import tkinter as tk from tkinter import filedial ...

  2. html5表单上传控件Files筛选指定格式的文件:accept属性过滤excel文件

    摘自:http://blog.csdn.net/jyy_12/article/details/9851349 (IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允 ...

  3. file类型允许的文件格式设置问题,&OpenCurlyDoubleQuote;选择文件”打开缓慢

    1,file类型的input对于打开的选择框的属性是由以下两个属性控制的: ①multiple="multiple" :一次可以选择多个文件 ②accept="image ...

  4. C&num;选择文件、选择文件夹、打开文件(或者文件夹)

    1.选择文件用OpenDialog OpenFileDialog dialog = new OpenFileDialog(); dialog.Multiselect = true;//该值确定是否可以 ...

  5. VBS脚本代码(手工编写---在windows 7上调用系统对话框,来选择文件)

    '=========================================================================='' VBScript Source File - ...

  6. ng-file-upload(在单文件选择,并且通过点击&OpenCurlyDoubleQuote;上传”按钮上传文件的情况下,如何在真正选择文件之前保留上一文件信息?)

    文章前面研究ng-file-upload可能涉及指令: You can use ng-model or ngf-change instead of specifying function for ng ...

  7. MyWebViewDemo【封装Webview常用配置和选择文件、打开相机、录音、打开本地相册的用法】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装webview的常用配置和选择文件.打开相机.录音.打开本地相册的用法.[如果想要使用简单的预览功能,可以参考<MyBri ...

  8. C&num;选择文件、选择文件夹、打开文件

    1.选择文件用OpenDialog OpenFileDialog dialog = new OpenFileDialog(); dialog.Multiselect = true;//该值确定是否可以 ...

  9. C&num; 选择文件、选择文件夹、打开文件(或者文件夹) 路径中获取文件全路径、目录、扩展名、文件名称 追加、拷贝、删除、移动文件、创建目录 修改文件名、文件夹名!!

    https://www.cnblogs.com/zhlziliaoku/p/5241097.html 1.选择文件用OpenDialog OpenFileDialog dialog = new Ope ...

随机推荐

  1. CSS:谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  2. 【WP开发】WebView控件应用要点

    WebView控件我就不多作详细的介绍,相信大家都懂的,就算你没用过,你看他的名字和长相都知道它的用途了.就是用来显示HTML内容的. 在WP 8.1的Runtime App中,这个控件大致有以下几个 ...

  3. Linq To Entities 及其相关&lpar;进阶&rpar;

    上篇我们讲解了Linq To Entities的一些基本操作,这篇我们主要是讲解一些比较高级的东西:存储过程查询,SQL语句查询以及表达式树. 存储过程 首先来讲解存储过程查询. //Query a ...

  4. ORA-04031 With Leak in &quot&semi;OBJ STAT MEMO&quot&semi; Allocations Seen in V&dollar;SGASTAT on 10&period;2&period;0&period;5 &lpar;文档 ID 1350050&period;1&rpar;

    APPLIES TO: Oracle Server - Enterprise Edition - Version: 10.2.0.5<max_ver> and later   [Relea ...

  5. cardsui-for-android

    https://github.com/Androguide/cardsui-for-android cardsui-for-android-master.zip

  6. 【数据库】mysql数据库索引

    文章归属:http://feiyan.info/16.html,我想自己去写了,但是发现此君总结的非常详细.直接搬过来了 关于MySQL索引的好处,如果正确合理设计并且使用索引的MySQL是一辆兰博基 ...

  7. selenium 设置代理的话,可以使用这种方式,代码是我刚才测试过的,亲测可用

    from selenium import webdriver chrome_options = webdriver.ChromeOptions() chrome_options.add_argumen ...

  8. 小tip&colon; transition与visibility

    一.transition与visibility 这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值,会发现竟然有一个visibi ...

  9. php 抽象类 静态 单体设计模式

    php oop----抽象类 抽象类机制使得子类可共用基类的某些信息,具体细节会留给子类,典型用在这样情形中,抽象类并不定义全部的方法,部分方法的实现推迟到子类继承抽象类时.它是介于接口和具体类间的一 ...

  10. 逆袭之旅DAY17&period;东软实训&period;Oracle&period;PLSQL&period;过程,函数,包,练习

    2018-07-13 14:54:46 --1.创建一个包,包含一个为雇员加薪的过程,一个为雇员减薪的过程 CREATE OR REPLACE PACKAGE pac_test1 IS PROCEDU ...