精华内容
下载资源
问答
  • window.onfocus 当进入当前页面时会执行的事件监听 window.onblur 当离开当前页面时会执行的事件监听 window.onfocus = function () { document.title = '页面正常了...'; }; window.onblur = function () { ...

    window上有两个方法
    window.onfocus 当进入当前页面时会执行的事件监听
    window.onblur 当离开当前页面时会执行的事件监听

    window.onfocus = function () {
     document.title = '页面正常了...';
    };
    window.onblur = function () {
     document.title = '快回来~页面崩溃了';
    };
    
    展开全文
  • 页面中只能有一个元素有焦点,一个聚焦,另一个就失焦,默认在document。例子结构如下:js操作如下:1.form.txt1.focus(); // 让元素获得焦点,该方法不会触发onfocus()事件。2.form.txt1.onfocus=function(){...

    焦点事件:

    不是所有元素都有焦点事件,只有可交互性的元素才有,比如表单元素,a标签。页面中只能有一个元素有焦点,一个聚焦,另一个就失焦,默认在document。

    例子结构如下:

    js操作如下:

    1.form.txt1.focus();    // 让元素获得焦点,该方法不会触发onfocus()事件。

    2.form.txt1.οnfοcus=function(){console.log(1);}  //元素获得焦点时会触发该事件

    3.form.txt1.οnblur=function(){console.log(2);}  //元素失去焦点时触发该事件

    4.form.btn.οnclick=function(){form.txt1.select();}  //选中输入框中的所有文字

    5.form.btn.οnclick=function(){ form.txt1.setSelectionRange(2,5) ; form.txt1.focus(); }/ / setSelectionRange需要配合着focus()使用才看得到效果,其中setSelectionRange的结束位置不包含在内,setSelectionRange(start,end)包含两个参数,一个是start:起始位置;一个是end:结束位置。

    默认情况下,输入框中的文字被选中的文字颜色是蓝色,如果想要改变背景颜色,可以使用 #txt::selection{background: pink;}来改变

    展开全文
  • 一般是监听页面是否失焦的方式,而失焦的方式有很多种,比如QQ弹窗,切换页面,切换程序,input文件上传选择文件等 选择文件是正常情况,这种情况下需要过滤 本文很简单,其实就是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弹窗,目前来说还是行不通的,只好提示用户在考试之前关闭相关可能会弹窗的应用

     

    转载于:https://www.cnblogs.com/imwtr/p/6293720.html

    展开全文
  • 1.问题描述初始打开页面,input框自动聚焦,在输入n位数字后自动触发事件进行业务处理,结果以页面底部弹框形式展示,同时input失焦。但目前问题是,底部弹框出现后,input再次获得焦点,导致键盘弹起,阻挡住底部...

    1.问题描述

    初始打开页面,input框自动聚焦,在输入n位数字后自动触发事件进行业务处理,结果以页面底部弹框形式展示,同时input失焦。

    但目前问题是,底部弹框出现后,input再次获得焦点,导致键盘弹起,阻挡住底部弹框。

    只有在刚进入页面,第一次输入后会出现这个问题,保留在当前页面,第二次输入时一切正常。

    2.相应截图

    正常

    异常

    异常时输出

    3.代码片段

    {{ msg }}

    doSomething(e) {

    this.setData({

    fetchCode: e.detail.value,

    blurFlag: false,

    })

    if (e.detail.value.length === 11) {

    this.setData({

    focus: false,

    blurFlag: true,

    })

    this.loadOrder()

    }

    }

    loadOrder(e) {

    if (this.data.fetchCode.length === 11) {

    app.request()

    .header('content-type', 'application/json')

    .post(url)

    .query({

    token: app.get('token')

    })

    .send(params)

    .end()

    .then(res => res.body)

    .then(({code, data}) => {

    if ( code === 200) {

    let modalType = 1

    let msg = this.data.msg

    if (data.success) {

    modalType = 1

    } else {

    modalType = 3,

    msg = data.failReason

    }

    this.setData({

    focus: false,

    modalType: modalType,

    msg: msg,

    showModal: true,

    })

    }

    console.log('loadOrder end')

    console.log('focus: ' + this.data.focus)

    })

    }

    }

    bindfocus() {

    if (this.data.blurFlag) {

    this.setData({

    focus: false

    })

    console.log('bindfocus blurFlag: ' + this.data.blurFlag)

    console.log('focus: ' + this.data.focus)

    } else {

    this.setData({

    focus: true

    })

    console.log('bindfocus blurFlag: ' + this.data.blurFlag)

    console.log('focus: ' + this.data.focus)

    }

    }

    bindblur() {

    this.setData({

    focus: false

    })

    console.log('bindfblur blurFlag: ' + this.data.blurFlag)

    console.log('focus: ' + this.data.focus)

    }

    4.分析问题

    bindfocus和bindblur事件、blurFlag变量只是为了排除检测问题而设置的。

    根据控制台输出结果发现,在业务处理结束后,代码设置focus=false触发了一次bindblur, 另外未知因素触发了一次bindfocus。这一次bindfocus到底是什么行为触发的,并没有找到。

    而且,为什么只进入页面后第一次输入会出现这个问题,onload中并没有进行任何涉及聚焦失焦的操作,只是data中初始化focus为true、blurFlag为false。

    微信版本为6.6.7

    请教各位大神,在线等。

    展开全文
  • 为什么我弃用失焦事件呢?因为在我的小程序文章中提供了评论文章的功能,昨天空闲下来我想将回复评论的功能也做一下,我想让回复和评论同时共用一个文本框如下图一,我来说明一下的操作:当我们进入文章界面的时候,...
  • 原神岩港奇珍行记突发事件并不是百分百的能够触发成功的哦,有的时候还会出现无法触发的情况,那么具体如何解决呢,现在就来告诉给大家详细内容吧,希望各位能够喜欢哦~ 游戏新活动打工委托再次出错:“岩港奇珍...
  • antd的input输入框自动失焦

    千次阅读 2020-06-13 17:08:14
    在项目开发中又遇到input输入框自动失焦问题,百思不得其解!!! 解决方案: 一番百度查找资料之后发现:因为map遍历用的key值是随机数时间,key值的变化会触发render页面渲染,导致的页面刷新input拾取焦点。 问题...
  • 对于长页面,可以先拖动页面到底部,触发页面完成加载。 driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") 如果元素处于不可见区域,那么虽然可以定位到,但是不能操作。可以利用js使得...
  • 1.问题描述初始打开页面,input框自动聚焦,在输入n位数字后自动触发事件进行业务处理,结果以页面底部弹框形式展示,同时input失焦。但目前问题是,底部弹框出现后,input再次获得焦点,导致键盘弹起,阻挡住底部...
  • Html5的scrollIntoView属性( DOM元素的scrollIntoView()方法是一个IE6浏览器也支持的原生JS API,可以让元素进入视区,通过触发滚动容器的定位实现) function scrollToView() { var element = document....
  • 如豆瓣搜索框,在搜索时,会显示一个下拉列表,这个时候如果点击搜索框外面,会触发blur事件,下拉列表隐藏;如果点击下拉列表,则会跳转到相应的页面,在练习过程中,这个环节出了一些问题,我的部分代码如下 $('...
  • 1.问题描述初始打开页面,input框自动聚焦,在输入n位数字后自动触发事件进行业务处理,结果以页面底部弹框形式展示,同时input失焦。但目前问题是,底部弹框出现后,input再次获得焦点,导致键盘弹起,阻挡住底部...
  • 页面上实现回车触发登录

    千次阅读 2018-03-10 22:31:01
    后来改到了body上解决了问题,无论input聚焦还是失焦都可以触发,特此记录。 代码 写了个例子,只是演示回车登录,没有具体功能 &lt;!DOCTYPE html&gt; &lt;html lang="en"&...
  • 点击页面按钮,显示弹窗(弹窗内可展开多个列表,列表中有多条输入框,展开时整个弹窗内容超一屏),当弹窗内的内容滚动时,背景不随之滚动(一般滚动到底部或顶部后,内部滚动条会触发背景主页面滚动,如果背景页面...
  • JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击...
  • 润乾报表v4-下拉数据集选值触发

    千次阅读 2016-11-30 09:17:48
    按照客户的需求可以根据单元格设定初值更改的条件下来触发我们的带参跳转本身页面的方式来实现我们的查询,但我们的内置函数_cellValueChanged(cell)函数对其他编辑风格都可以达到该效果,下拉数据集必须要在选值...
  • IOS滚动页面时,input光标跟着动 说白了input在手机上聚焦时触发foucs事件,会弹出输入法 当我们滑动页面时,input光标会跟着页面滑动,跑出input框外。...同时使用再让input触发blur失焦即可 ...
  • 按照客户的需求可以根据单元格设定初值更改的条件下来触发我们的带参跳转本身页面的方式来实现我们的查询,但我们的内置函数_cellValueChanged(cell)函数对其他报表编辑风格都可以达到该效果,下拉数据集必须要在选...
  • 做的项目有个需求,弹窗里面有个表单,里面的输入框按回车和失焦都可以触发某一事件,如果同时绑定就会出现按回车之后,在关闭弹窗或点击其他位置都会触发blur的事件,解决方法: 页面结构: blur是data里面的一个...
  • 输入框所在的元素用了position:fixed,安卓端一切正常,ios系统在input失焦后键盘缩回去了但是页面不归位。可能原因:键盘事件触发,导致position:fixed失效。 解决办法: $(&quot;input&quot;).on(&...
  • IOS微信浏览器内H5页面点击事件失效

    千次阅读 2019-08-08 19:17:29
    也就是说,其实是input聚焦后页面被顶起,然后失焦页面回位,但是这里只是视觉上回位了,window其实已经被顶上去一定的距离。你再次点击页面时就已经错位了,视觉上的点击事件触发按钮其实不是真正的按钮位置,...
  • 我是直接在App.vue主文件那里添加一下代码,主要是添加一个监听器,如果touchmove的时候就会触发让其失焦,就会消失那个光标,需要再次点击输入框才会显示,就不会存在那个奇奇怪怪的问题.虽然有点投机取巧,但是起码不会...
  • //全局监听 input 失焦事件,当触发事件后,将 body 的 scrollTop 设置为 0。 document.addEventListener('focusout', () => { document.body.scrollTop = 0; }); // 或者 $('.input').blur(function() { ...
  • 在我们实际开发过程中,表单很多的情况下,对每个表单值改变的时候做事件监听,一般都选在失去焦点的时候触发失焦事件,而不是在输入的时候做事件处理,这样会消耗性能或资源,造成页面卡顿什么的。但是失焦触发也有...
  • 初识前端--JS事件

    2019-10-17 20:54:24
    初识前端--JS事件事件 事件 动态触发的功能 主要分类 鼠标事件 点击 移动 聚焦 失焦 键盘事件 回车 字符输入 页面事件 页面加载
  • ES5学习总结

    2020-08-10 17:56:22
    onfocus 和 onblur 聚焦和失焦 window.onscroll 滚动窗口触发 onmouseover 只在刚进入区域时触发。 onmousemove 除了刚进入区域触发外,在区域内移动鼠标,也会触发该事件。 onmouseout鼠标移出时候触发 ondblclick ...
  • 由于浏览器的默认事件,当你点击按钮时,页面中有文本框失焦时,会先触发文本框的blur事件,然后再触发click事件,所以导致了上述的bug。解决方案如下。 解决方案 pc端:使用mousedown事件来代替click事件 移动端:...
  • Ajax 知识点

    2017-12-18 20:32:25
    1.Ajax概述 1.优点: 无页面刷新,用户体验好 2.请求与响应 请求:访问服务器端的任何一个程序都可以...2.在用户名文本框上绑定失焦事件,一但失焦就会触发一次请求,将用户名发送后台程序,响应2:与传统模式一...

空空如也

空空如也

1 2
收藏数 39
精华内容 15
关键字:

触发页面失焦