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;
}

效果图

• 有聚焦默认样式
  

• 无聚焦默认样式