div失去焦点事件onblur()不触发解决方法

最新推荐文章于 2024-08-04 18:23:42 发布
最新推荐文章于 2024-08-04 18:23:42 发布
阅读量3.6k 收藏 4
点赞数 2
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46787337/article/details/127644634
版权

需求：

做一个弹出框组件，文字点击时会在文字下方弹出一个框，在vue3中监听div元素的blur事件发现事件并不会在div失去焦点时触发
在这里插入图片描述

解决方法

bug原因：在vue中div默认不触发事件,除非将元素添加tabindex="-1"属性才会触发blur事件

<div tabindex="-1"  @click="toggle" @blur="hide">

在react中

在react中div元素是能触发onblur事件的

<div onFocus={open} onBlur={close}></div>
weixin_46787337
关注
html的DOM中Event对象onblur事件用法实例
09-03
主要介绍了html的DOM中Event对象onblur事件用法,实例分析了onblur事件的使用范围与对应的javascript使用技巧,需要的朋友可以参考下
文本框获得焦点和失去焦点的判断代码
09-05
在JavaScript中，我们可以通过监听`onfocus`和`onblur`事件来判断文本框是否获得了焦点或失去了焦点。例如： ```html 楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='...
DIV的失去焦点(blur)实现方法
09-22
主要介绍了DIV的失去焦点(blur)实现方法,用防抖实现DIV鼠标移出消失,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
div 元素失去焦点时的触发方法
最新发布
weixin_52268321的博客
08-04 491
有个两个div元素需要在失去焦点时，触发方法隐藏 div但是 blur 无法直接作用在 div 元素上。
div失去焦点事件onblur()无效
m0_47659279的博客
01-13 6828
初学js事件，想做一个点击时变红，取消聚焦时变白的div，于是我这样写代码： <div style="width: 100px;height: 50px;border: 1px solid;"></div> <script> let div = document.getElementsByTagName("div")[0]; //点击时变红 div.onclick = function(){ this.style.backgroun
div 触发失去焦点事件
蜗牛的精神
12-02 5358
div 触发失去焦点事件 设置tabindex属性可触发焦点事件 测试一下 测试一下 测试一下 document.getElementById('birthday__jQSelect0').onmouseover = function(){ document.getElementById('birthday__jQSelect0').focus(); return false;
div的失焦事件
qq_41436056的博客
01-06 1460
div的失焦事件 div本身不具有失焦事件，在vue中添加:tabIndex=“1” @blur="fn()"即可
div失去焦点事件实现思路
09-04
blur只是针对form表单控件的，而对于 span , div , li 之类的，则没办法触发它们的动作，本文有个示例，看看是怎么实现的
jsp+ajax实现的局部刷新较验验证码(onblur事件触发较验).docx
01-20
- **验证码输入框**：当用户在输入框内输入验证码后，一旦焦点离开该输入框（即触发onblur事件），就会调用`validate`函数进行验证。 - **验证函数**：该函数首先检查输入是否为空。如果非空，则创建一个...
div失去焦点 vue_DIV的失去焦点(blur)实现方法
weixin_28717647的博客
01-14 4930
用防抖实现DIV鼠标移出消失由于div标签本身不支持onblur事件，所以对于点击一个按钮弹出的div，我们想要当这个div失去焦点的时候，让它消失不能使用的onblur来实现。但是可以利用onmouseout和事件来实现DIV失去焦点消失的功能。直接使用onmouseout来实现移出消失可能会有一个问题：假设你的按钮的位置和弹出的div的位置不是重合的那么会导致鼠标移动就会马上去触发onmous...
div绑定onBlur事件无效的解决方法
sunzhen15896的博客
05-31 152
该场景适用于 点击页面空白区域关闭div的情况。给div绑定onBlur事件，默认不触发。
JQuery仿Div失去焦点和输入框切换的效果
07-24
利用HTML5+CSS3+JQuery模拟Div失去焦点的效果，同时可以输入框切换
div无法触发blur事件解决办法
weixin_30298497的博客
11-18 896
默认情况下div无法获取焦点，无法触发focus与blur事件，猜测span，a等标签也无法触发焦点事件(input:button，及button标签可以触发) 如何使div触发blur事件：可以给div加上tabindex属性 在线演示：http://sandbox.runjs.cn/show/e0bvfcag 源码： <!DOCTYPE html> <html...
vue change事件_vue起步篇2，从0基础开始到全家桶，vue基础指令
weixin_39526564的博客
12-03 485
点击上方蓝字关注我吧vue基础指令主要作用是: 模板+数据::: 前端渲染, === 也就是把数据填充到html中去,指令(以 v- 开始)插值表达式: {{}} ---> 将数据填充到Html页面中, 做一些基本的计算操作---> 存在闪动的问题, 使用 v-clock 解决<div>{{msg}}div>12v-clock: 解决闪动 , 需要提供样式 ...
【Vue实践】Vue中Input框失焦事件无效问题解决
lynnhgwang的博客
07-06 8662
记录在做项目中遇到的以西Input输入框失焦事件无效问题及解决思路 文章目录问题场景演示代码片段问题简单描述解决思路问题出现的原因分析解决办法两种解决思路1.定时器 setTimeout()2.nextTick()效果演示源码参考 问题 场景演示 代码片段 <div class="flex items-center"> <span>昵称：</span> <span v-if="isEditName" cl.
DIV的失去焦点(blur)实现
weixin_34183910的博客
08-12 4284
用防抖实现DIV鼠标移出消失   由于div标签本身不支持onblur事件，所以对于点击一个按钮弹出的div，我们想要当这个div失去焦点的时候，让它消失不能使用的onblur来实现。  但是可以利用onmouseout和事件来实现DIV失去焦点消失的功能。直接使用onmouseout来实现移出消失可能会有一个问题：假设你的按钮的位置和弹...
vue 输入框失去焦点时触发
06-07
在Vue中，也可以使用v-on指令来绑定失去焦点事件。与原生JavaScript的onblur事件不同的是，在Vue中我们可以使用v-model指令来双向绑定输入框的值，这样可以方便地获取输入框中的内容。示例代码如下： ``` <template> <div> <input type="text" v-model="inputValue" v-on:blur="handleBlur"> </div> </template> <script> export default { data() { return { inputValue: '' } }, methods: { handleBlur() { // 在这里编写失去焦点时要执行的操作 } } } </script> ``` 在这个示例中，我们使用v-model指令将输入框的值绑定到了data选项中的inputValue属性上，然后使用v-on指令来绑定失去焦点事件，并在handleBlur方法中编写失去焦点时要执行的操作。当输入框失去焦点时，handleBlur方法将被调用，并且可以通过this.inputValue来获取输入框中的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值