div,span等标签支持focus/blur事件

<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;"></div>

div获得焦点

div正常情况下是无法获得焦点的,所以其blur方法和focus方法都是没有用的,解决方案如下:

<div class="fileInfo" tabindex ="0"></div>

加入tabindexdiv便可通过tab或点击的方式获得焦点,也可通过js的focus方法获得

css中去除获得焦点状态下的边框:outline:none;


DIV焦点事件

div本来是没有focusblur事件的。

如果用div来模拟一个input标签,同时需要它和input一样响应focusblur事件,就需要给他加上attribute:tabindex

只要元素的tabIndex属性设置成任何有效的整数那么该元素就能取得焦点。元素在取得焦点后就能触发onblur,onfocus,onkeydown, onkeypressonkeyup事件。

不同tabIndex值在tab order(Tabbing navigation)中的情况:

  • tabIndex值是正数的对象根据递增的值顺序和代码中的位置顺序来被选择
  • tabIndex值是0的对象根据在代码中的位置顺序被选择
  • tabIndex值是负数的对象会被忽略
obj.style.outline="none";

如果获得焦点的时候出现虚线框可以这样去除。

另外,focus并不会冒泡(w3c标准)

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值