给div元素添加blur() 事件或者focus()事件,tabindex,改变键盘上的 "Tab" 键在链接之间进行导航的顺序

给div元素添加blur() 事件或者focus()事件

话不多少上代码

<body>
    <p onblur="b()" onfocus="f()" tabindex="2">获取焦点,失去焦点的事件</p>
</body>
<script>
    function f(){
        console.log('获取焦点')
    }
    function b(){
        console.log('失去获取焦点')
    }
</script>

如果我们不想让元素加上一个选中边框的样式可以添加css样式

 <style>
    p{
        resize: none;
        outline: none;
    }
</style>

这里最主要的就是tabinde这个属性,tabindex 全局属性 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航

tabinde还可以改变键盘上的 “Tab” 键在链接之间进行导航的顺序链接地址
它接受一个整数作为值,具有不同的结果,具体取决于整数的值:

  1. tabindex=负值
    (通常是tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用JS做页面小组件内部键盘导航的时候非常有用。
  2. tabindex=“0” ,
    表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的DOM结构来决定的。
  3. tabindex=正值,
    表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前DOM中的先后顺序决定。

注:tabindex 的最大值不应超过 32767。如果没有指定,它的默认值为 -1。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值