div绑定onblur事件

onblur失去焦点事件只能在input、a、button等元素上绑定，在某些情况下无法使用这些标签，需要给div元素绑定onblur事件。

这时候可以给div绑定tabIndex属性：

<div tabindex="0" onblur="functionA"></div>

PS：tabIndex属性应该绑定number，根据w3c的解释，tabIndex是tab 键用于导航时规定元素的 tab 键控制次序（1 是第一个）。

使用tabIndex后可能出现的样式问题，元素默认会加上黑边样式：

使用outline:0 none;清除黑边，针对一些ie浏览器可以尝试使用hidefocus="true"属性。

div绑定onblur事件相关推荐

div的onblur事件
一般情况下,onblur事件只在input等元素中才有,而div却没有,因为div没有tabindex属性,所以要给div加上此属性. 如: <div onfocus='alert(" ...
html设置点击事件相同,html有多个类名相同的div，如何给每个div绑定click事件并区分？...
1.页面有9个div,类名都是.flag,然后想给每个div都绑定一个click事件,点击.flag时,获取其后代元素.count的值和.ds-subtitle的rel属性. 下面这样的写法请问哪里出 ...
js绑定onblur事件
对于页面上文本框验证时,我们需要给文本框添加事件. 原生JS方法: 添加:document.getElementById("field").setAttribute("o ...
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
vue 移动端在div上绑定click事件失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
div失去焦点事件onblur()不触发解决方法
需求: 做一个弹出框组件,文字点击时会在文字下方弹出一个框,在vue3中监听div元素的blur事件发现事件并不会在div失去焦点时触发解决方法 bug原因:在vue中div默认不触发事件,除非将元 ...
div上绑定keyDown事件
keydown,keyup,keypress事件默认是给页面上可以聚焦的元素绑定键盘事件,例如input输入框,点击输入框即代表聚焦在该元素上.那么想要给div或者其他不能聚焦的元素上使用键盘事件怎么 ...
div盒子注册失去焦点onblur事件
div盒子本身是不支持onblur事件,通常会使用这个div的经过事件onmouseout或onmouseleave,来达到效果: 但这两个事件和我们想要的效果是有一定差距的:没什么卵用 onblur ...
div失去焦点事件onblur()无效
初学js事件,想做一个点击时变红,取消聚焦时变白的div,于是我这样写代码: <div style="width: 100px;height: 50px;border: 1px sol ...
div如何添加onfocus和onblur事件
正文有时候自己DIY一些组件的时候,容器一般就用div. 而div默认是没有聚焦的,没有聚焦onfocus和失焦onblur事件. 不过只要加上tabindex属性就好啦,值可以随便些. <d ...

div绑定onblur事件

div绑定onblur事件相关推荐

最新文章

热门文章