dom元素的tabindex属性介绍及在vue项目中的应用

dom元素的tabindex属性介绍及在vue项目中的应用

tabindex属性作用

  1. 让普通dom元素变为可聚焦的元素
  2. 让普通dom元素可以参与顺序键盘导航(通常使用Tab键,因此得名)。

tabindex属性的取值和影响

它接受一个整数作为值,具有不同的结果,具体取决于整数的值:

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

根据键盘序列导航的顺序,值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

注意:如果我们在 div上设置了 tabindex 属性,它的子元素内容不能使用箭头键来滚动,除非我们在内容上也设置 tabindex查看这篇 fiddle 来理解 tabindex 的滚动影响

tabindex属性的使用

<div 
     v-if="dialogVisible"
     tabindex="1"
     class="dialog"
     ref="dialog"
     @blur="loseFocus"
>
    这是一个弹窗
</div>

tabindex属性项目中的应用

需求:有一个默认隐藏的弹窗dialog,当鼠标点击一个button时,让弹窗显示;当用户点击弹窗dialog之外的其他区域时隐藏弹窗(要求不能使用全屏遮罩)

  1. 给弹窗dialog加一个tabindex属性,让其变为可聚焦的元素。tabindex="1"
  2. 给弹窗dialog绑定一个失去焦点的事件。@blur="loseFocus"
  3. button绑定click事件,当click事件触发的时候,让弹窗展示,同时聚焦弹窗。<button @click="handleOpenDialog">打开弹窗同时获取焦点</button>
  4. 在用户点击button时,触发handleOpenDialog函数,在这个函数内控制弹窗的展示,同时让聚焦弹窗。
  5. 在用户点击弹窗dialog之外的区域时,会触发弹窗的失去焦点的事件函数loseFocus
  6. loseFocus函数内控制弹窗的隐藏

详细代码如下:

<template>
    <div>
        <button @click="handleOpenDialog">打开弹窗同时获取焦点</button>
        <div 
            v-if="dialogVisible"
            tabindex="1" 
            class="dialog" 
            ref="dialog" 
            @blur="loseFocus"
        >
            这是一个弹窗
        </div>
    </div>
</template>

<script lang='ts'>
import { Vue, Component } from "vue-property-decorator";

@Component({
    name: "Father"
})
export default class Father extends Vue {
    // data
    dialogVisible: boolean = false; //是否显示弹窗

    /**
     * 显示弹窗,同时获取焦点
     */
    handleOpenDialog() {
        // 显示弹窗
        this.dialogVisible = true;

        // 让弹窗获取焦点
        // 第一种写法
        // setTimeout(() => {
        //     (this.$refs.dialog as any).focus();
        // }, 0);

        // 第二种官方写法(推荐)
        this.$nextTick(() => {
            (this.$refs.dialog as any).focus();
        });
    }

    /**
     * 弹窗失去焦点, 隐藏弹窗
     */
    loseFocus() {
        this.dialogVisible = false;
    }
    
}
</script>

<style lang="scss">
.dialog {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    
    &:focus {
        outline: 0;
    }
}
</style>

备注:如果不想让弹窗聚焦的时候有默认的外边框样式,可以加一段css代码控制样式

.dialog:focus {
    outline: 0;
}

效果图

  • 有聚焦默认样式

  • 无聚焦默认样式

posted @ 2019-08-01 15:25  _冰  阅读(...)  评论(... 编辑 收藏