精华内容
下载资源
问答
  • 这时,当input框失去焦点的时候,我要让展示列表隐藏或消失,而且我还想点击对应的展示列表中的li时,能够将对应li的值赋值给input。 问题:   那么问题来了,当我点击li的时候,也就意味着input失去了焦点,我还...

    前言:

      在开发的过程中,我们经常会有搜索的需求,其中就涉及到的知识点就包括了今天我们要说的两个重要“角色”,input框和展示列表的li。

    需求:

      当我们在input框中输入内容时,展示列表能够渲染出模糊查找到对应的内容。这时,当input框失去焦点的时候,我要让展示列表隐藏或消失,而且我还想点击对应的展示列表中的li时,能够将对应li的值赋值给input。

    问题:

      那么问题来了,当我点击li的时候,也就意味着input失去了焦点,我还没有选中并拿到li中的值给input,展示列表就先一步隐藏或消失了。
      看到这里,大家是不是已经想到了关键点了呢?没错,就是失去焦点事件和列表li的点击事件发生冲突了。那么,也就意味着,它们两者之间一定有一个谁先谁后的问题,该怎么解决呢?

    方法

    把click事件拆分成mouseup和mousedown事件

    当鼠标点下,并未抬起时,让搜索框持续保持焦点状态

    document.getElementsByTagName("input")[0].focus()
    

    当鼠标抬起时,执行对应的操作,让搜索框失去焦点

    document.getElementsByTagName("input")[0].blur()
    

    这样子就解决了input失去焦点事件和展示列表li的click事件冲突问题。

    展开全文
  • 背景:在真机浏览/调试中发现,在input中绑定bindinput后,在bindinput的事件中加一个console,在input失去焦点后,vconsole中可以看到打印结果,代表失去焦点触发了bindinput事件。 具体的实现方式是: 1.在data中...

    背景:在真机浏览/调试中发现,在input中绑定bindinput后,在bindinput的事件中加一个console,在input失去焦点后,vconsole中可以看到打印结果,代表失去焦点触发了bindinput事件。

    具体的实现方式是:
    1.在data中增加变量isClear: false
    2.在点击清空按钮时,除了做基本的数据清空操作外,增加了将isClear赋值为true,证明是点击了清空按钮
    3.在bindinput绑定的事件中,增加了判断:

    if (this.data.isClaer) {
        this.setData({
           isClaer: false
        })
        return
    }
    // 接下来是正常的处理赋值逻辑

    在点击清空按钮,input失去焦点触发的bindinput事件中,会将变量isClaer恢复初始值,并return。
    在其他正常的input失去焦点而触发的bindinput事件中,由于没有涉及到input中value的改变,不会影响。

    console中可以看到打印结果,代表失去焦点触发了bindinput事件。

    展开全文
  • //点击关闭按钮 input框不触发失去焦点事件 document.getElementById('js_close').onmousedown=function(e){ if ( e && e.preventDefault ){ e.preventDefault(); }else{ window.event....
    //点击关闭按钮 input框不触发失去焦点事件
    document.getElementById('js_close').οnmοusedοwn=function(e){
        if ( e && e.preventDefault ){
            e.preventDefault();
        }else{
            window.event.returnValue = false;
        }
        return false;
      
      };

    preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。

    window.event.returnValue=false//IE

     

    转载于:https://www.cnblogs.com/qiu2841/p/10856434.html

    展开全文
  • 博主之前在用vue的获取焦点失去焦点的时候,出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候,突然@blur和@focus又好用了。emmmm,看来这部分值得一战。 二、首先是正宗的监听事件的...

    一、背景

          博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候,突然@blur和@focus又好用了。emmmm,看来这部分值得一战。

    二、首先是正宗的监听事件的写法

    1、html代码

    //这是html的输入框。定义了一个获取焦点,失去焦点的方法
     <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" >
    

    2、JS部分

       // 失去焦点和得到焦点的验证方法,name为要验证的字段名,type为blur或focus
        animateWidth(name, type) {
          if (name == "company_name") {
            if (type == "blur") {
              this.companyName.animate = false;
            } else {
              this.companyName.animate = true;
              return;
            }
            if (this.companyName.companyName.trim().length == 0) {
                this.companyName.valid = false;
                this.companyName.message = "请输入企业名称";
                return false;
            }else{
                 this.companyName.valid = true;
                return true;
            }  
          } 
        },
    

    这个方法算是通用的方法,大家在html里面根据自己的需求传不同的值即可。

    三、为什么上次监听焦点事件失败呢

    1、不好用的原因

    博主又去看最初自己用@blur和@focus失败的代码,发现:

      <i-input class="wallet-password-1" size="large"  v-model="counts" refs = "counts" placeholder="0" type="number">
                    </i-input>
    

          上次用的html部分是借用i-view框架的,也就是说,我们在使用vue的一些方法的时候,可能会和ui框架定义的方法冲突。这部分参考博客:
    https://segmentfault.com/q/1010000011021884

          了解原因之后,我们就知道了,使用vue自带的@blur和@focus是没问题的,如果在你的代码中不起作用,那只能证明一件事,那就是你的UI框架自己定义的有获取焦点失去焦点的方法。建议大家使用UI框架之前,先去官方文档看看,这样会好很多。

    2、新增指令的方法

          之前百度的时候,看到很多人都说可以通过新增指令来自定义获取焦点失去焦点的方法,具体的可以参考博客:
    https://blog.csdn.net/weixin_42011096/article/details/80764182

    出现这个问题,说到底还是自己对vue不熟练造成的,姑且记录一下吧。

    end

    展开全文
  • 要求点击某个区域,阻止input框 (或者设置了 contenteditable=“true” 的编辑区)失去焦点。 要求像微信输入框那种点击选择表情、图片等要求保留原来焦点的位置的情况。因为一失去焦点位置,除非是往最前面或最后面...
  • input框焦点事件

    千次阅读 2019-07-09 18:30:12
    3种状态: //输入框正在输入时 $("#test1").on('input',function(){ alert('正在输入'); }) //输入框得到焦点时 $("#test2").on('focus',function(){ ...
  • 结果发现在前端输入框输入第一个值的时候会直接失去焦点,在网上查找发现原因如下 setSelectGoodsData 重新render了, 而render函数中某个地方存在if else类似的判断,重新计算了if else 产生了新的内容, 改变了...
  • input框失去获得焦点

    千次阅读 2013-11-06 18:06:44
    场景: ...鼠标移开文本框失去焦点,如果input为空,加入缺省提示; $(function(){ /*定义焦点和失去焦点事件*/ $.domFocusBlur = function($dom) { if(!$dom) return; var defVal = $dom.val(); $dom
  • input type="text" ref="comment" maxlength="100" v-model="message" placeholder="发表你的评论" @search.stop="onSearch" @blur="inputBlur"> this.$nextTick(() => { this.$refs.comment.focus(); }) ...
  • <p>input失去焦点和获得焦点jquery焦点事件插件, <strong style="color:#F00">鼠标在搜索中点击的时候里面的文字就消失了。 38 39 40 select 中option的change事件: 1 $("#CSS_Font_...
  • 1、问题页面显示效果 2、解决办法,在input获取焦点的样式中加入outline:none;或outline-width:0; input[type=text]:focus, select:focus{ ... 3、问题解决后input框获取焦点时页面的显示效果  ...
  • Jquery input 触发失去焦点事件

    万次阅读 2016-08-03 17:45:21
    我们需要触发失去焦点事件. 直接调用input.blur() 有的时候不起作用.可以灵活运用下延时. 说不定就解决了.var input = jQuery("#wefwe"); input.focus(); setTimeout(function () { input.trigger("blur"); }, 100...
  • input失去焦点和获得焦点jquery焦点事件插件, 鼠标在搜索中点击的时候里面的文字就消失了。 我们在做网站的时候经常会用到搜索获得焦点失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,...
  • 开发过程中,会经常遇到搜索需求,这就会涉及到input搜索,外面还会有ul、div等搜索列表, ...blur事件,当元素失去焦点时触发的事件,为表单事件,blur和focus事件不会冒泡,其他表单事件都可以
  • 获得失去焦点 <input type="text" value="abcd"> <... 当input框 失去焦点时 获取value值 var input = document.querySelector('input'); input.onblur = function () { //获取value值
  • JS中,何为鼠标失去焦点事件??是onmouseout事件。... function myFunct其实,楼主完全可以只掉一次函数就行, 应为它input就是两种情况么,要么获得焦点,要么失去焦点,而你的函数if...else.都已经诠释...
  • 在文章的开始,我先把我的目的说明一下:在移动端,如何在前端实现input框获得焦点的同时不会唤起手机键盘。 在做公司项目的时候遇到这样一个问题,因为项目需要在ubuntu、window、android端都可以执行,其中...
  • input框自动获得焦点

    千次阅读 2019-03-20 09:40:10
    autofocus 定义和用法 ...autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。 如果使用该属性,则 input 元素会获得焦点。 <input type="text" autofocus="autofocus" /> ...
  • 一个弹出层中有input输入框,第一次输入内容后ios键盘收起,再次点击input框输入内容时获取不到焦点 原因 在弹出层点击input时调起键盘,页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset...
  • 定义了一个获取焦点失去焦点的方法 <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" > 2、JS部分 ...
  • //给特定区域添加ID 绑定onmousedown 事件 document.getElementById('customModelItemMatch').onmousedown=function(e){ //现代浏览器阻止默认事件 if ( e &amp;&amp; e.preventDefault ) e.p...
  • Bootstrap input框获取焦点

    千次阅读 2019-12-11 09:02:39
    Bootstarp 打开模态框时,需要让指定的input框获取焦点。 在$(function(){})中增加以下代码: $('#Modal').on('shown.bs.modal',function(e){ //模态框的ID $('#input').focus();//通过ID找到对应输入框,让其...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,304
精华内容 14,921
关键字:

input框失去焦点事件