精华内容
下载资源
问答
我要提问
  • 页面的失焦和聚焦触发事件
    2020-07-08 10:49:04

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

    window.onfocus = function () {
 document.title = '页面正常了...';
};
window.onblur = function () {
 document.title = '快回来~页面崩溃了';
};
    javascript
    更多相关内容

  • 详解小程序input框失焦事件在提交事件前的处理

     2021-01-03 06:56:00
    为什么我弃用失焦事件呢？ 因为在我的小程序文章中提供了评论文章的功能，昨天空闲下来我想将回复评论的功能也做一下，我想让回复和评论同时共用一个文本框如下图一，我来说明一下的操作：当我们进入文章界面的时候...
    收起

  • h5 input光标在点击另一个表单元素没触发失焦事件？？input属性不要乱用呀~

     2021-09-30 10:44:50
    在移动端，input如果设置为disabled，就无法正常触发点击事件，导致上一个input的失去焦点事件不生效 //input <input type="text" placeholder="手机号" v-model="address.phone"> //不能设置为disable如果要...

    input如果不想输入框有光标，只想作展示用，可以改成readonly=“readonly”
    在移动端，input如果设置为disabled，就无法正常触发点击事件，导致上一个input的失去焦点事件不生效

    //input
<input type="text"  placeholder="手机号" v-model="address.phone">
//不能设置为disable如果要点击
<div v-hammer:tap="() => onSelectAddress()">
	//错误
	<input type="text" class="main" placeholder="省市区" v-model="address.area" disabled>
   //正确
    <input type="text"  placeholder="省市区" v-model="address.area" readonly="readonly">
</div>代码片

    这是在维护旧项目的时候发现的bug，测试说要改好，便好好看了下，原来是前同事把这个所在地区里的input设置了disabled，所以点击这个input(红色区域)是会令上面的输入框正常失去焦点的,进而挡住了下方的收货地址的弹窗，体验很不好。去掉disabled换成readonly就行了！
    在这里插入图片描述
    正常应该直接收起键盘，弹出地址选择页面
    在这里插入图片描述
    唉，每日涨点小知识？？记录下来提前庆祝国庆的到来，嘿嘿
    在这里插入图片描述

    收起
    展开全文
    html5

  • js中表单的聚焦失焦事件

     2020-12-22 18:36:58
    页面中只能有一个元素有焦点，一个聚焦，另一个就失焦，默认在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;}来改变

    收起
    展开全文

  • 【解决方案】如何解决输入框失焦事件与按钮点击事件冲突的问题

     千次阅读 2017-08-20 15:38:57
    直接上代码（demo可直接拷贝运行）： ...方法1、通过给失焦事件设置延迟触发。 方法2、将按钮的点击（click）事件改为按下（mousedown）事件。   参考链接： 快速解决js开发下拉框中blur与click冲突  

    直接上代码（demo可直接拷贝运行）：

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <style type="text/css">
        .father{
            width: 500px;
            height: 300px;
            background: green;
            padding-top: 20px;
        }
        .father input {
            width: 120px;
            height: 28px;
            border: 1px solid blue;
        }
        .father button{
            width: 60px;
            height: 28px;
            margin-left: 10px;
        }
    </style>
    <script>
        function btn() {
            alert("you click it");
        }
    </script>
</head>
<body>
<div class="father" id="father" tabindex="1">
    <input id="testInput" placeholder="请输入您的信息"><button id="testBtn" onclick="btn()">提交</button>
</div>
</body>
<script>
    //  鼠标按下事件
    $("#testBtn").mousedown(function(){
        alert("my button mousedown");
    });
    
    //  输入框失焦事件
    $("#testInput").blur(function(){
        alert("now blur  ~~~");
    });

    //  输入框失焦事件 延迟触发
//    $("#testInput").blur(function(){
//        setTimeout(function(){
//            alert("now blur  ~~~");
//        }, 300)
//    });
</script>
</html>


    问题描述：

     

    给一个输入框设置失焦事件之后，失焦事件总是优先其它事件先触发，导致输入完成之后点击提交按钮无效。

     

    解决方案：

    方法1、通过给失焦事件设置延迟触发。

    方法2、将按钮的点击（click）事件改为按下（mousedown）事件。

     

    参考链接：快速解决js开发下拉框中blur与click冲突

     

    收起
    展开全文
    javascript

  • 【JQuery】两种失焦事件的使用

     2021-11-21 11:17:02
    可以通过给jsp / html页面的input输入框绑定失去焦点事件，来判断用户是否已结束...因此在不同的使用场景可以使用不同的失焦事件，如对于购物车来说，修改某个参数值，如果想要确实修改后才触发事件，就可以使用chan
    收起
    IDEA 前端 jquery javascript javaweb

  • VUE 鼠标失焦事件数据改变但前端页面不渲染问题解决

     2021-12-10 16:40:57
    设置了鼠标失焦事件 @on-blur=“proposalAmountBlur” 当鼠标失焦时自动将数据做千分位符格式保留两位小数，但是当测试时候一直没有改变格式，以为没有获取到鼠标失焦事件，直到控制台输出数据的时候才发现数据已经...
    收起
    vue.js 前端 javascript

  • 解决移动端H5页面软键盘弹起input失焦后不回弹底部

     2021-02-02 10:25:36
    //页面滚动距离 timer = setInterval(function() { currentPosition = document.documentElement.scrollTop || document.body.scrollTop; currentPosition -= speed; window.scrollTo(0, currentPosition); //...
    收起
    vue.js javascript

  • react中使用Ueditor--失焦事件监听

     2021-08-20 17:01:26
    在使用Ueditor的react组件中： componentDidMount() { const { ueditorBlur } = this.props; this.editor = window.UE.getEditor('ueditorId'); // 'ueditorId'为Ueditor组件的id值 this.editor.addListener('...
    收起
    react

  • 解决antd/antd-mobile等input输入后自动失焦的问题

     2021-12-31 16:32:41
    这个问题主要发生在render该组件时存在 if 判断 或者switch 判断的情况下，数据变更后引起组件重新render，导致input也被重新渲染，肯定会自动失焦，解决办法也很简单，把input部分抽离出来单独封装成一个小组件，...
    收起
    前端 react.js javascript

  • vue 回车事件 失焦事件

     千次阅读 2019-12-13 17:55:54
    在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <...但是如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因...
    收起

  • js事件——点击事件与失焦事件冲突解决

     千次阅读 2018-05-09 12:44:44
    如豆瓣搜索框，在搜索时，会显示一个下拉列表，这个时候如果点击搜索框外面，会触发blur事件，下拉列表隐藏；如果点击下拉列表，则会跳转到相应的页面，在练习过程中，这个环节出了一些问题，我的部分代码如下 $('...
    收起

  • React Input框输入一次就失焦

     2021-06-01 09:53:44
    给每个tr和td标签都添加了一个key值，问题就是这个key取的值是“日期+随机数”，导致页面每次重新渲染时，key值都会变化，就相当于渲染之后的table和之前的不是同一个了，所以导致Input框失焦。类似如下代码。(代码...
    收起
    reactjs javascript

  • iview Input 输入一个字符就主动失焦问题的解决

     2021-07-22 19:26:13
    今天在使用iview组件库中的Input时,为组件设置了on-blur事件，但是发现每输入一个字符就会失焦触发on-blur事件，导致输入不断触发验证。 解决如下： <FormItem v-for="(inputItem,index) in nodeData.inputs" :...
    收起

  • vue中失焦事件和点击事件冲突，如何解决？

     2021-09-18 14:15:44
    //设备号失焦事件 blurInput(){ setTimeout(() => { this.isShowAuto = false },100) }, ②可以把点击事件修改成@mousedown鼠标按下事件（推荐这样解决） <div v-show="isShowAuto" class="auto"> &...
    收起
    javascript vue.js html5

  • javascript实现网页搜索条输入框的获焦和失焦事件

     2020-09-16 13:41:21
    JS代码如下： /* * 搜索条输入框的获焦和失焦事件 * 调用方法：searchInput("输入框的id","默认文本的颜色","用户输入的文本的颜色") * 参 数: 1-3个,参数1必选;若参数2、3无值,则默认文本颜色为"black",输入框文本...
    收起
    javascript

  • input的失焦事件和click事件冲突问题

     2021-01-23 10:24:18
    描述：在input输入框得焦的状态下，点击button的click事件时，页面执行了blur（虚拟键盘消失），而没有执行click事件 原因：因为blur优先级大于click，所以导致click没执行，要再点击才执行 解决方法就是使用下面...
    收起
    jquery

  • vue input组件设置失焦与聚焦

     千次阅读 2022-01-29 16:34:22
    我在iview-admin这个后台管理系统中，使用input输入框失焦时触发了一个axios请求，但是，当我从其它页面，携带input输入框的数据进入该页面，进行数据填充的时候发现，数据填充没有问题，但是因为没有触及到失焦事件...
    收起
    vue.js 前端 javascript

  • 微信小程序input失焦异常

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

  • input失焦事件与点击事件冲突处理

     千次阅读 2018-12-17 17:21:26
    ... 效果如图 点击时间完成后添加失焦事件 点击不好用了 事件执行顺序失焦高于点击 ...给点击标签加一个 mousedown 事件， 在其中执行 event.preventDefault(), ...另外一个笨方法 失焦事件中添加 setTimeout 再进...
    收起
    blur click

  • ElementUI框架 el-input和el-select组件失焦问题

     千次阅读 2021-01-08 16:14:56
    el-input，el-select添加filterable属性后,如果都是打开一个弹窗页面，这两个组件的焦点事件并没有取消，就会出现如下问题（就是选择的下拉框会和弹窗同在一个z-index上，都是因为没有失焦引起的，Bug重现步骤：el-...
    收起

  • 如何解决输入框失焦事件与按钮点击事件冲突的问题

     2020-07-03 13:00:15
    方法1、通过给失焦事件设置延迟触发。 方法2、将按钮的点击（click）事件改为按下（mousedown）事件。
    收起

  • 移动端滚动类框架 iScroll5 表单元素无法失焦 解决方法

     2021-06-13 13:29:57
    iScroll5 表单元素无法失焦 解决方法HTML5学堂：iScroll框架从4版本升级到5版本之后，很好的解决了滚动区域中表单元素不能聚焦的问题，但是，2014年年底测试的时候发现了5版本的一个问题，如果在滚动区域当中增加了...
    收起

  • 规避Electron中webview在touch模式下失焦后第一次点击无效的问题

     千次阅读 2021-12-11 15:55:46
    问题 ... 在Electron的issue中搜了一下发现这竟然又是一个从第一个版本到现在一直存在的Bug。 规避方案 既然Electron没有提供可以...在webview的页面中增加对touchstart、touchmove、touchend的监听后发现： window.ad
    收起
    webview electron javascript touch

  • Selenium一些特殊情况的处理：失去焦点、点击不生效、长页面处理、先触发事件才能动态加载的元素、日期输入

     2021-03-21 10:40:19
    对于长页面，可以先拖动页面到底部，触发页面完成加载。 driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") 如果元素处于不可见区域，那么虽然可以定位到，但是不能操作。可以利用js使得...
    收起

  • 小程序input框失焦事件在提交事件前的处理

     万次阅读 2018-12-03 09:31:34
    为什么我弃用失焦事件呢？ 因为在我的小程序文章中提供了评论文章的功能，昨天空闲下来我想将回复评论的功能也做一下，我想让回复和评论同时共用一个文本框如下图一，我来说明一下的操作：当我们进入文章界面的时候...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,367
精华内容 546
热门标签
关键字：

触发页面失焦